Как мне нацелить функцию щелчка jquery, где существуют идентичные ссылки (то есть в пределах php foreach)?

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

Идентификаторы должны быть уникальными в HTML-документе. Если у вас есть несколько элементов с 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='show_comments1'

и

id='answer_comments1'

для уникальной идентификации обоих разделов

ИЛИ, пройдите вверх по дереву от элемента, вызывающего событие, к известному родителю, а затем найдите ответ дочерний и переключите () его