Question

我正在尝试使用jQuery在用户单击“a”元素时显示div。我正在努力，因为我无法准确地瞄准div。

查看下面的代码，您会看到我的计划列出了优惠（优惠＃1＆amp;优惠＃2）。在商品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元素时，它将显示带有.comments类的所有div。但是，我只想在单击.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。

使用jQuery进行元素定位

1 个答案: