無法在單個HTML頁面上顯示Java / CSS圖像畫廊的多個實例

Question

JavaScript-我知道這是我需要添加一些內容才能使多個實例運行的地方，但是我真的不知道如何正確編碼。

<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
    $('#images_thumbnails a').click(function () {
        var newImageSrc = $(this).attr('href');
        $('#images_full img').attr({
            'src': newImageSrc
        });
        return false;
    });
</script>

CSS-這很簡單

#images_full img, 
#images_thumbnails img {
    padding: 3px;
    border: 1px solid #CCC;
}

#images_thumbnails img {
    margin: 4px;
    width: 40px;
    height: 40px;
}

HTML-最后是HTML元素

<div id="images_full">
    <img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
</div>

<div id="images_thumbnails">
    <a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
        <img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
    </a>
    <a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
        <img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
    </a>
    <a href="kuttinew/images/full_image/kuttison-complete-set03.jpg">
        <img src="kuttinew/images/thumbnail/kuttison-complete-set03.jpg" />
    </a>
</div>

直到我在同一HTML頁面上添加第二個實例為止，它的工作情況都非常好，第二個實例只是在自己的窗口中打開，就像它們幾乎繞過了Java命令一樣。

Answer 1

我要在黑暗中刺痛，說您的問題是您僅使用ID（＃）而不是類（。）來表示您的多個照相館。 如果您希望多個“實例”之間具有相似的行為，則您的jQuery腳本應該作用於一個類而不是一個id。 例如：

http://jsbin.com/otiTOyU/1/edit?html,css,js,output

腳本：

<script type="text/javascript" src="kuttinew/jquery-1.10.2.js"></script>
<script>
$('.images_thumbnails a').click(function () {
  var newImageSrc = $(this).attr('href');
  // Traverse the DOM to change this's respective '.images_full img'
  $(this).parent().prev().children().first().attr('src', newImageSrc);
  return false;
});
</script>

CSS：

.images_full img, 
.images_thumbnails img {
  padding: 3px;
  border: 1px solid #CCC;
}

.images_thumbnails img {
  margin: 4px;
  width: 40px;
  height: 40px;
}

HTML：

<div id="gallery1">
  <div class="images_full">
    <img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
  </div>

  <div class="images_thumbnails">
    <a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
      <img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
    </a>
    <a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
      <img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
    </a>
  </div>
</div>
<div id="gallery2">
  <div class="images_full">
    <img src="kuttinew/images/full_image/kuttison-complete-set01.jpg" />
  </div>

  <div class="images_thumbnails">
    <a href="kuttinew/images/full_image/kuttison-complete-set01.jpg">
      <img src="kuttinew/images/thumbnail/kuttison-complete-set01.jpg" />
    </a>
    <a href="kuttinew/images/full_image/kuttison-complete-set02.jpg">
      <img src="kuttinew/images/thumbnail/kuttison-complete-set02.jpg" />
    </a>
  </div>
</div>

您可以采用不同的方法來優化代碼。 但是，我將把它留給您作為練習。 請務必查看我在帖子開頭附近給出的鏈接，以進行實時演示。