jQuery查找选择器
jQuery查找选择器
提问于 2014-10-23 12:23:09
我的站点中有一个简单的图像开关，其结构如下：
<div id="modal">
<div id="colors">
<ul class="product-image-thumbs">
<li>
<a href="#">
<img src="thumb-0.jpg" id="thumb-0" class="gallery-image">
</a>
</li>
<li>
<a href="#">
<img src="thumb-1.jpg" id="thumb-1" class="gallery-image">
</a>
</li>
<li>
<a href="#">
<img src="thumb-2.jpg" id="thumb-2" class="gallery-image">
</a>
</li>
</ul>
</div>
<div class="photo">
<img src="current_img" id="1">
</div>
</div>jQuery
jQuery(document).ready(function(){
jQuery(".gallery-image").click(function(){
$(".photo > img").prop("src", jQuery(this).prop("src"));
});
});我认为它的工作很好，直到我看到它改变了所有的img鞭子显示在一个div与照片类。
情况是，在我的网上商店的产品列表中，产品都有自己的div，所以选择器在网站上出现了多次。
我试过以下几种方法
jQuery(this).next(".photo > img").prop("src", jQuery(this).prop("src"));
jQuery(this).find(".photo > img").prop("src", jQuery(this).prop("src"));但两者都不起作用，因为它找不到元素
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-10-23 13:10:55
其思想是使用.closest()查找映像父级.closest()，然后使用.next()查找其下一个<div class="photo">兄弟级，然后使用.find()查找同级中的<img>。
小提琴。
$(document).ready(function()
{
$(".gallery-image").click(function()
{
var photoDiv = $(this).closest('ul').parent().next('div.photo');
photoDiv.find('img').prop("src", $(this).prop("src"));
});
});注释：这段代码对HTML非常敏感。例如，如果<div id="modal">在所有<div>中都是<div class="modal">，那么它就会更短、更安全：
$(document).ready(function()
{
$(".gallery-image").click(function()
{
var photoDiv = $(this).closest('.modal').find('.photo');
photoDiv.find('img').prop("src", $(this).prop("src"));
});
});Stack Overflow用户
发布于 2014-10-23 12:30:07
您目前正在试图在.photo > img中找到.gallery-image，因此没有匹配。
您宁愿像这样直接选择元素：$('.photo > img')。
例子：
$(document).ready(function(){
$(".gallery-image").click(function(){
$('.photo > img').prop("src", $(this).prop("src"));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="modal">
<div id="colors">
<ul class="product-image-thumbs">
<li>
<a href="#">
<img src="http://placekitten.com/g/200/200" id="thumb-0" class="gallery-image">
</a>
</li>
<li>
<a href="#">
<img src="http://placekitten.com/g/200/200" id="thumb-1" class="gallery-image">
</a>
</li>
<li>
<a href="#">
<img src="http://placekitten.com/g/200/200" id="thumb-2" class="gallery-image">
</a>
</li>
</ul>
</div>
<div class="photo">
<img src="current_img" id="1">
</div>
Stack Overflow用户
发布于 2014-10-23 12:58:03
Jquery(这个)指的是您刚才单击的内容..。因此，将父母()遍历到包围整个块的最外层的div，然后遍历回.photo > img。
jQuery(document).ready(function(){
jQuery(".gallery-image").click(function(){
jQuery(this).parents("#modal").find(".photo > img").prop("src", jQuery(this).prop("src"));
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26527994
复制相关文章
相似问题
腾讯云开发者
