如何在存在相同链接的情况下（例如，在php foreach中）定位jquery click函数？

Question

类似于Facebook在其新闻提要上所做的事情，我想允许对众多提要项进行评论，这是通过php foreach语句提取的。 这将创建相同的类。 因此，当我单击.show_comments时，它将激活所有内容。

我经过这样的检查，发现类似于您在下面看到的内容...但是它对我不起作用。

如何针对单个.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"元素，则id="show_comments"您做错了，您将无法通过Javascript访问多个元素。 元素分组的正确方法是按类。

假设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');
});

这是一个实际的演示 。

Answer 2

#show_comments是一个ID，且ID必须是唯一的 。 当您生成名称/部分时，请使用类似

id='show_comments1'

和

id='answer_comments1'

唯一地标识两个部分

或者，从引发事件的元素上遍历树到已知的父级，然后找到答案子级并将其toggle（）