jquery：運行腳本而不影響具有相同類別的div

有一個產品循環，我需要在點擊時更改圖像。就像在每個產品循環中一樣，有一大堆具有相同類的div。在我的情況下受到影響。不能隔離它們。初始圖像確實消失。但沒有一個，這是有意的，但它們都是。而沒有新的影像顯示在單一產品jquery：運行腳本而不影響具有相同類別的div

<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的

HTML

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

http://jsfiddle.net/h1twaf1y/

來源

2014-11-04 whaaaaaaz

您可能需要完全使用DOM方法（.parent（），.sibling（）等），並且完全忘記了類選擇器這個案例。你可以發佈一個「工作」js到目前爲止的小提琴（使用可以用背景顏色替換圖像來節省時間/複雜度）嗎？從那時起，我大概可以開始工作。 – peaceoutside 2014-11-05 00:03:15

您的點擊事件僅上升到父級別.galcolors，其中不包含galitem2。你需要用parent（）。parent（）來代替兩個級別。請看我的答案。 – emmaaaah 2014-11-05 00:09:34

張貼小提示... – whaaaaaaz 2014-11-05 00:10:00

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兩個級別，並找到正確的項目

在您的初始代碼中的問題是，你只上升了一級與父（）div.galcolors你應該有父母（），父母（），最多div.product上升兩個級別。

來源

2014-11-05 00:05:25 emmaaaah

這個劇本，但是仍然有我的一個問題，點擊時，所有的元素都消失了。感謝您指出父母的錯誤。 – whaaaaaaz 2014-11-05 00:13:36

我以爲你想要一切消失。如果沒有，那麼在hide（）上使用parent（）。parent（）並且它將起作用http://jsfiddle.net/q72nw00t/2/ 答案發生變化 – emmaaaah 2014-11-05 00:14:01

dang。那很簡單...謝謝！ – whaaaaaaz 2014-11-05 00:18:11

你想找到.galitem相對於被點擊的物品，你可以找到的方式是使用$.closest()。最近的將遍歷DOM樹（從當前節點開始），直到它找到一個匹配的選擇器，這比使用父類更好，因爲您不依賴於DOM結構，從而使代碼變得更脆弱，更易於閱讀。因此，您的代碼將如下所示：

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

來源

2014-11-05 00:35:55 user2705632

jquery：運行腳本而不影響具有相同類別的div

回答

相關問題