使用jQuery进行元素定位

我试图使用jQuery在用户单击“a”元素时显示div。然而，我很挣扎，因为我无法准确地瞄准div

查看下面的代码，您可以看到我的程序列出了报价（报价1和报价2）。在offer div的正下方是comments div（此处显示了对offer的注释）。可以单击.comment_图标元素来显示/隐藏注释

<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();
    }
);

报价#1在这里
这里是对报价的评论
报价#2在这里
这里是对报价的评论#2
$（'.comment_图标'）。切换(
函数（）{
$（'.comments'）.slideDown（）；
},
函数（）{
$（'.comments'）.slideUp（）；
}
);

我的问题是，当点击.comment_图标元素时，它将显示带有.comments类的所有div。但是，我只想在单击.comment_图标时显示属于相应报价的报价

---

有什么方法可以进行这种启动吗？

首先，您不应该使用两个具有相同

id的元素，但可以这样说，这是您想要的：

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

正如我所说，您想将
id='offer'
更改为
class='offer'
，然后只需将我的答案中的选择器更改为
div.offer
即可！你是最好的。谢谢！：-）