我正在尝试创建一个简单的照片库，其中一张照片是大的，也有拇指在底部，当点击成为那张大照片。画廊在单独的模式窗口。我的代码只在第一个模态窗口中工作。事实上，这是我第一次使用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"));
});
id必须是uniq以避免问题..
删除id=“big”并将id=“thumbnails”替换为class=“thumbnails”
null
$(".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>