如何定位存在相同链接的jquery click函数(即在php foreach中)？

Question

什么Facebook并在其新闻源类似,我想允许评论众多的饲料项目,其中我通过一个PHP foreach语句拉动.这是创建相同的类.因此,当我点击.show_comments时,它会激活所有内容.

我经历了SO,发现了类似于你在下面看到的东西......但它对我不起作用.

如何定位单个.show_comments以设置动画并切换所选项目？

$j(function() {
    $j(this).find('.show_comments').click(function(){
        $j(this).find('.comments').slideDown("fast");
        $j(this).find(".answer_comments").toggle();
    });

    $j(this).find('.hide_comments').click(function(){
        $j(this).find('.comments').slideUp("fast");
        $j(this).find(".answer_comments").toggle();
    }); 
});

Answer 1

ID在HTML文档中应该是唯一的.如果你有几个元素,id="show_comments"你做错了,你将无法通过Javascript访问其中的1个以上.对元素进行分组的正确方法是按类.

这样做的正确方法就是这样,假设HTML如下所示:

<div id="item-1">
....text of whatever people are commenting on....
  <a href='#' class='toggle_comments'>show comments</a>
  <div class='comments' style='display: none;'>
  ... comments ...
  </div>
</div>

<div id="item-2">
....text of whatever people are commenting on....
  <a href='#' class='toggle_comments'>show comments</a>
  <div class='comments' style='display: none;'>
  ... comments ...
  </div>
</div>

然后Javascript/jQuery将是:

$('a.toggle_comments').toggle(function() {
    $(this).next('div.comments').slideDown('fast');
    $(this).text('hide comments');
}, function() {
    $(this).next('div.comments').slideUp('fast');
    $(this).text('show comments');
});

以下是它的实际演示.