Question

有一个产品循环，我需要在点击时更改图像。就像在每个产品循环中一样，有一大堆具有相同类的div。在我的情况下受到影响。无法隔离他们。初始图像确实消失了。但不是一个，这是有意的，而是所有这些。并且没有出现新图像

单品的html

<div class="product">
    <div class="galwrap displaytable">
        <div class=" galitem galitem1"></div>
        <div class=" galitem galitem2"></div>
    </div>
    <div class="displaytable galcolors">
        <div class="displaytablecell galcolor galcolor1"></div>
        <div class="displaytablecell galcolor galcolor2"></div>
    </div>
</div>

和jquery

$(".product").each(function () {
    $(this).find(".galcolor2").click(function () {
        $(".galitem").hide();
        $(this).parent().find(".galitem2").show();
    });
});

http://jsfiddle.net/h1twaf1y/

Answer 1

http://jsfiddle.net/q72nw00t/2/

使用Javascript：

$(".galcolor2").click(function(){
    $(".galitem").hide();
    $(this).parent().parent().find(".galitem2").show();
});

HTML :(这只是一遍又一遍重复的部分）

<div class="product">
<div class="galwrap displaytable">
 <div class=" galitem galitem1">this will be hidden</div>
 <div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>   
<div class="displaytable galcolors">
 <div class="displaytablecell galcolor galcolor1"></div>
 <div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
----------
<div class="product">
<div class="galwrap displaytable">
 <div class=" galitem galitem1">this will be hidden</div>
 <div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>   
<div class="displaytable galcolors">
 <div class="displaytablecell galcolor galcolor1"></div>
 <div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
----------
<div class="product">
<div class="galwrap displaytable">
 <div class=" galitem galitem1">this will be hidden</div>
 <div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>   
<div class="displaytable galcolors">
 <div class="displaytablecell galcolor galcolor1"></div>
 <div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>

基本上你想听所有.galcolor2上的任何点击，然后当点击它时，隐藏所有.galitem，然后只显示相关.galitem2通过上升两个级别到div.product并找到正确的项目

您的初始代码中的问题是，您只使用parent（）上升到div.galcolors的一个级别，而您应该使用parent（）。parent（），最多到div.product上升两个级别。

Answer 2

您希望找到相对于所点击项目的.galitem，您可以找到使用$.closest()的方式。最近将向上移动DOM树（从当前节点开始），直到找到匹配的选择器，这比使用父选择要好得多，因为您不依赖于DOM结构，使您的代码不那么脆弱且易于阅读。所以你的代码看起来就像这样：

$(".product").each(function(){
    $(this).find(".galcolor2").click(function(){
        $(".galitem").hide();
        $(this).closest(".product").find(".galitem2").show();
    });
});

jquery：运行脚本而不影响具有相同类的div

2 个答案: