jquery图像库无法正常工作
我正在尝试创建一个简单的照片库，其中一张照片是大的，也有拇指在底部，当点击成为那张大照片。画廊在单独的模式窗口。我的代码只在第一个模态窗口中工作。事实上，这是我第一次使用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"));
});
共有1个答案
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>-
问题内容： 如果您单击此处的单击此处订购按钮：http: //www.game onglove.com/ gog / test3.html，然后在弹出的灯箱窗口中单击相同的按钮，则将使用$运行ajax请求.post（）。 您可以点击“继续购物”以返回到上一个灯箱式窗口，以快速重新开始。 如果我在控制台（chrome或firefox）中在此处执行jquery代码，则它可以正常工作。它只是无法从源代码
-
问题内容： 我正在尝试一个代码 这按预期工作。但是，当我将其编写为： 它只是警告“开始”并终止。可以在http://jsfiddle.net/XQFyq/2/找到一个工作示例。我究竟做错了什么？ 问题答案： 不是递归对象，因此它没有方法。 是 一个延迟对象，因此在您调用时为何起作用。 您的调用 是 一个延迟对象，因此，如果您将该方法作为方法的一部分返回，则可以添加回调 （ 请参见此处的示例 ），一
-
问题内容： 我做了一个test.html文档来测试脚本。不知何故它不起作用，我不明白为什么什么也没发生。该脚本位于-tags中，并带有-tag，而css也具有- tags。为什么不起作用？这是代码 问题答案： 由于用于绑定事件处理程序的代码是在元素存在于中之前执行的，因此事件未绑定到元素上。 要解决此问题，您可以 将您的代码包装在回调中，以便在加载完成后执行您的代码 将您的脚本移动到的末尾，以便所
-
问题内容： 此功能在IE，Firefox和Chrome上均能完美运行，但在iPhone上，仅在单击时才能使用。单击页面（除了img以外的任何地方）都不会触发该事件。 HTML部分非常基础，不应成为问题。 有任何想法吗？ 问题答案： 添加以下代码即可。 问题是iPhone不会引发点击事件。他们引发“触摸”事件。非常感谢苹果。他们为什么不能像其他所有人一样保持标准？无论如何，感谢Nico的提示。
-
问题内容： 我将拔出所有剩余的头发，因此，如果您知道可能是什么问题，请帮助我。谢谢。我所有的谷歌搜索和搜索都没有得到回报。 首先，我正在使用jquery-1.7.2.min.js和ASP.net 2.0 Web表单。 我正在尝试使用jquery进行ajax调用，但始终收到语法错误/解析错误消息。我尝试了许多不同的方法，但是当我将dataType设置为json时，它们都会导致错误。 这是我所拥有的：