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

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，然后通过向上两级到 div.product 并找到正确的元素只显示相关的 .galitem2

您初始代码中的问题是，您使用 parent() 仅上升了一个级别到 div.galcolors，而您应该使用 parent().parent() 上升了两个级别，直到 div.product。