无法在单个 HTML 页面上显示 Java/CSS 图像库的多个实例

Cannot display multiple instances of Java/CSS image gallery on single HTML page

本文关键字：图像 CSS 实例 Java 显示 单个 HTML      更新时间：2023-09-26

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 命令一样。

我要在黑暗中试一试，说你的问题是你只是使用 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>

您可以通过不同的方式优化代码。 但是，我会把它留给你作为练习。 请务必查看我在帖子开头附近提供的链接，以进行现场演示。

相关文章：