如何在存在相同鏈接的情況下（例如，在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（）