jquery 图片库无法正常工作

Question

我正在尝试创建一个简单的照片库，其中一张照片很大，底部还有缩略图，点击后会变成那张大照片。图库位于单独的模态 windows 中。我的代码仅适用于第一个模式 window。事实上，这是我第一次使用 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") 表示找到第一个 parent 和 class gallery

find("img").first() 表示首先找到带有标签 img 和 select 的孩子

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

你也可以写：

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

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

Answer 2

使用 jquery closest() 找到最接近的并找到 #big 并替换。

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

.modal_content{text-align:center;margin-top:100px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<div class="modal_content">
        <div class="gallery">
            <img class="big" src="https://via.placeholder.com/150">
        
            <div id="thumbnails">
                <a href="https://via.placeholder.com/150"><img src="https://via.placeholder.com/150"></a>
                <a href="https://via.placeholder.com/151"><img src="https://via.placeholder.com/151"></a>
                <a href="https://via.placeholder.com/152"><img src="https://via.placeholder.com/152"></a>
            </div> 
        </div>
         <!--other content-->
    </div>
    
    <div class="modal_content">
        <div class="gallery">
            <img class="big" src="https://via.placeholder.com/150">
        
            <div id="thumbnails">
                <a href="https://via.placeholder.com/150"><img src="https://via.placeholder.com/150"></a>
                <a href="https://via.placeholder.com/151"><img src="https://via.placeholder.com/151"></a>
                <a href="https://via.placeholder.com/152"><img src="https://via.placeholder.com/152"></a>
            </div> 
        </div>
         <!--other content-->
    </div>

jquery 图片库无法正常工作

jquery image gallery is not working as it should

jquery

image-gallery