使用jQuery進行元素定位

Question

我想在用戶單擊「a」元素時使用jQuery來顯示div。但是我掙扎着，因爲我無法準確地瞄準div。看看下面的代碼，您會看到我的程序列出了優惠（優惠＃1 &優惠＃2）。在offer div下面，有評論div（顯示提供評論的地方）。可以點擊.comment_icon元素來顯示/隱藏評論。

<div id="offer"> 
Offer#1 goes here 
<a href="#" class="comment_icon">Show comments</a> 
</div> 
<div class="comments"> 
Comments for Offer#1 goes here 
</div> 

<div id="offer"> 
Offer#2 goes here 
<a href="#" class="comment_icon">Show comments</a> 
</div> 
<div class="comments"> 
Comments for Offer#2 goes here 
</div> 

$('.comment_icon').toggle(
    function() { 
     $('.comments').slideDown(); 
    }, 
    function() { 
     $('.comments').slideUp(); 
    } 
); 

我的問題是，當點擊.comment_icon元素時，它會顯示所有的div與.comments類。不過，我只是想要點擊.comment_icon時顯示屬於各自報價的那個。

有什麼辦法可以做到這種tartgeting？

Answer 1

首先，你不應該使用兩個元素具有相同id，但讓只說你保持這種狀態，這是你想要的東西：

$('.comment_icon').click(function(e){ 
    $(this).closest('div#offer').next('.comments').slideToggle(); 
    e.preventDefault(); 
}); 

就像我說的，你想改變id='offer'到class='offer'，然後在我的回答中更改選擇器div.offer。