Question

类似于Facebook在其新闻源上所做的，我想允许评论许多Feed项目，我通过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

在HTML文档中ID应该是唯一的。如果您有多个id="show_comments"元素，那么您做错了，您将无法访问其中的1个以上的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');
});

And here is a demo of it in action

Answer 2

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

的内容

id='show_comments1'

和

id='answer_comments1'

唯一标识两个部分

或者，从提升事件的元素遍历树到已知父级，然后找到答案子级并切换（）它

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

2 个答案: