Question

我正在使用以下功能切换活动Feed中的评论框。应该发生的是单击“注释”一词，注释框变为可见。

这只发生在列表中的第一个元素上。如果我在第一个条目之外的任何条目上单击“注释”一词，则第一个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对于页面上的每个元素都应该是唯一的。可能是您有多个具有相同ID的元素，因此您将面临此问题。当您使用$('#comment_box')时，jQuery将返回具有所需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

你显然拥有更多id为comment_box的元素.... css id在页面上应该是唯一的。这就是它切换第一个comment_box的原因，因为它应该只是一个页面上带有id comment_box的元素。使用class而不是id。

jquery切换单个列表项

2 个答案: