jquery 개별 목록 항목을 전환하십시오.

Question

아래 기능을 사용하여 활동 피드의 설명란을 전환합니다. "메모"라는 단어를 클릭하면 주석 상자가 표시됩니다.

이것은 목록의 첫 번째 요소에서만 발생합니다. 첫 번째 항목 이외의 항목에 "Comment"라는 단어를 클릭하면 첫 번째 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가있는 첫 번째 요소를 반환합니다.

id 대신 클래스를 사용하고 해당 클래스 이름으로 요소를 선택할 수 있습니다. nextAll을 사용하여 해당 선택기와 호출 토글 메소드를 찾기 위해 필수 선택기를 전달해야합니다.

마크 업 변화

<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 ID는 페이지에 고유해야합니다. 그래서 첫 번째 comment_box는 페이지의 id comment_box와 함께 1 개의 요소 여야하기 때문에 토글됩니다. id 대신 클래스를 사용하십시오.