jquery toggle отдельный элемент списка

Question

Я использую функцию ниже для переключения полей комментариев в фиде активности. Что должно произойти, так это то, что щелкнуто слово «Комментарий», и окно комментариев становится видимым.

Это происходит только для первого элемента в списке. Если я нажимаю на слово «Комментарий» на любую запись, кроме первой, первый переключатель comment_box переключается.

Как я могу получить каждый блок комментариев для переключения по отдельности? Кроме того, что это за проблема, вызванная в jQuery? Я попытался посмотреть его, но не знал, как это назвать.

JQuery

$(function(){ 

    $('span#comment_box').hide(); 

    $('.comment').click(function() { 

    $('#comment_box').toggle(); 

    }); 
    }); 

HTML

<span href="" class="comment">Comment</span><br /> 
    <span id="comment_box"><textarea name="status_comment" /></textarea><br /></span> 

Вот jsfiddle - http://jsfiddle.net/jpBE3/

Answer 1

Прежде всего id должен быть уникальным для каждого элемента на странице. Возможно, у вас есть несколько элементов с одинаковым идентификатором, чтобы вы столкнулись с этой проблемой. jQuery вернет первый элемент, который имеет необходимый идентификатор, когда вы используете $('#comment_box').

Вместо id я бы предложил вам использовать класс, а затем вы можете выбрать элемент по его имени класса. Вы должны использовать nextAll, передавая требуемый селектор, чтобы найти соответствующий элемент и метод переключения вызова на нем.

изменение Markup

<span href="" class="comment">Comment</span><br /> 
<span class="comment_box"><textarea name="status_comment" /></textarea><br /></span> 

JS

$(function(){ 
     $('span.comment_box').hide(); 
     $('.comment').click(function() { 
      $(this).nextAll('.comment_box:first').toggle(); 
     }); 
    }); 

Answer 2

Вы, очевидно, имеют больше одного элемента с идентификатором comment_box .... CSS идентификаторы должны быть уникальными на странице. Вот почему он переключает первый comment_box, поскольку он должен быть только 1 элементом с id comment_box на странице. Используйте класс вместо id.