jquery 图片库无法正常工作

Question

我正在尝试创建一个简单的照片库，其中一张照片很大，底部还有缩略图，单击时会变成那张大照片。画廊位于单独的模式窗口中。我的代码仅适用于第一个模式窗口。 事实上这是我第一次使用jquery。我什至找不到如何使用console.log来检查问题出在哪里。

HTML:

  <div class="modal_content">
        <div class="gallery">
            <img id="big" src="foto/20210322_100211.jpg">
        
            <div id="thumbnails">
                <a href="foto/20210218_135910.jpg"><img src="foto/resized/20210218_135910 small.jpg"></a>
                <a href="foto/20210322_100211.jpg"><img src="foto/resized/20210322_100211 small.jpg"></a>
                <a href="foto/20210322_153418.jpg"><img src="foto/resized/20210322_153418 small.jpg"></a>
            </div> 
        </div>
         <!--other content-->
    </div>
    
    <div class="modal_content">
        <div class="gallery">
            <img id="big" src="foto/20210322_153418.jpg">
        
            <div id="thumbnails">
                <a href="foto/20210218_135910.jpg"><img src="foto/resized/20210218_135910 small.jpg"></a>
                <a href="foto/20210322_100211.jpg"><img src="foto/resized/20210322_100211 small.jpg"></a>
                <a href="foto/20210322_153418.jpg"><img src="foto/resized/20210322_153418 small.jpg"></a>
            </div> 
        </div>
         <!--other content-->
    </div>

jQuery:

   $("#thumbnails a").on("click", function (e) {
      e.preventDefault();
    
      $("#big").attr("src", $(this).attr("href"));
    });

Answer 1

id 必须是 uniq 以避免出现问题..

删除 id="big"并将 id="thumbnails"替换为 class="thumbnails"

$(".thumbnails a").on("click", function(e) {
  e.preventDefault();

  $(this).closest(".gallery").find("img").first().attr("src", $(this).attr("href"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal_content">
  <div class="gallery">
    <img src="foto/20210322_100211.jpg">

    <div class="thumbnails">
      <a href="foto/20210218_135910.jpg"><img src="foto/resized/20210218_135910 small.jpg"></a>
      <a href="foto/20210322_100211.jpg"><img src="foto/resized/20210322_100211 small.jpg"></a>
      <a href="foto/20210322_153418.jpg"><img src="foto/resized/20210322_153418 small.jpg"></a>
    </div>
  </div>
  <!--other content-->
</div>

<div class="modal_content">
  <div class="gallery">
    <img src="foto/20210322_153418.jpg">

    <div class="thumbnails">
      <a href="foto/20210218_135910.jpg"><img src="foto/resized/20210218_135910 small.jpg"></a>
      <a href="foto/20210322_100211.jpg"><img src="foto/resized/20210322_100211 small.jpg"></a>
      <a href="foto/20210322_153418.jpg"><img src="foto/resized/20210322_153418 small.jpg"></a>
    </div>
  </div>
  <!--other content-->
</div>

说明:

$(this).closest(".gallery") 表示查找第一个具有类 gallery 的父级

find("img").first() 表示查找带有标签 img 的子项并选择第一个

---

如果将 id="big" 替换为 class="big"

你也可以写:

$(".thumbnails a").on("click", function(e) {
  e.preventDefault();

  $(this).closest(".gallery").find("img.big").attr("src", $(this).attr("href"));
});