2

こんにちは、ショーのコメントの非表示を切り替えようとしています。最初は、すべてのコメントが class の単一の div 内にあるため、問題なく動作していました.forum-comments。

.forum-commentsただし、今はクラスを持つ div で各コメントを分割しています

これは元のコードです:

   // Button dynamic comment show
    $("#forum").delegate(".btn-forum-comment-show", "click", function() {
      $(this).parent().next(".forum-comments").toggle();
      var change = $(this).parent().find(".btn-forum-comment-show").text();
      var show = '<i class="icon-plus-sign icon-white"></i> show';
      var hide = '<i class="icon-minus-sign icon-white"></i> hide';
      if(change == ' show')
      {
        $(this).parent().find(".btn-forum-comment-show").html(hide);
      }
      if(change == ' hide')
      {
        $(this).parent().find(".btn-forum-comment-show").html(show);
      }
    });

クラス$(this).parent().next(".forum-comments").toggle();に各コメントがあるため、関数が機能しなくなりました。.forum-commentsしたがって、最初のコメントのオンとオフのみを切り替えます。残りは影響を受けません。各コメントが切り替えられるように、この動作を変更するにはどうすればよいですか?

html

    <div class="forum-comments" >
      <div class="forum-author">By: Jared De La Cruz on Sunday, July 07, 2013 7:31:20 PM</div>
      <div class="forum-owner">aae15c3ff2cf790b2c7fb61dbf1a83bfadbc59762622c4b39e25ba7e5fe434fd</div>
      <pre class="forum-body">yay comments!</pre>
      <div class="btn-group">
      <a class="btn btn-mini btn-danger btn-forum-comment-del-comment" id=""><i class="icon-remove-sign icon-white"></i> delete</a>
      </div>
    </div>
    <div class="forum-comments" >
      <div class="forum-author">By: Jared De La Cruz on Tuesday, July 09, 2013 1:17:40 PM</div>
      <div class="forum-owner">aae15c3ff2cf790b2c7fb61dbf1a83bfadbc59762622c4b39e25ba7e5fe434fd</div>
      <pre class="forum-body">2nd comment1</pre>
      <div class="btn-group"><a class="btn btn-mini btn-danger btn-forum-comment-del-comment" id=""><i class="icon-remove-sign icon-white"></i> delete</a></div>
    </div>

これらのコメントはデフォルトで非表示でstyle="display:none"あり、$.toggle()有効/無効になっています

セクション全体のダンプは次のとおりです。

<div class="forum-post">
        <div><span class="forum-title">Welcome to the forum!</span><span class="forum-type label label-forum-Discussion">Discussion</span></div>
        <div class="forum-author">By: Jared De La Cruz on Sunday, July 07, 2013 7:31:08 PM</div>
        <div class="forum-owner">aae15c3ff2cf790b2c7fb61dbf1a83bfadbc59762622c4b39e25ba7e5fe434fd</div>
        <pre>This is the student forum, where any student can post information with the option to add tags!</pre>
        <div class="btn-group"><a id="" class="btn btn-mini btn-danger btn-forum-comment-del"><i class="icon-remove-sign icon-white"></i> delete</a></div>
        <div class="btn-group"><a id="" class="btn btn-mini btn-primary btn-forum-comment"><i class="icon-comment icon-white"></i> comment</a></div>
        <div class="btn-group"><a id="" class="btn btn-mini btn-inverse btn-forum-comment-show"><i class="icon-plus-sign icon-white"></i> show</a></div>
        <div class="forum-comments" style="display: block;">
            <div class="forum-author">By: Jared De La Cruz on Sunday, July 07, 2013 7:31:20 PM</div>
            <div class="forum-owner">aae15c3ff2cf790b2c7fb61dbf1a83bfadbc59762622c4b39e25ba7e5fe434fd</div>
            <pre class="forum-body">yay comments!</pre>
            <div class="btn-group"><a id="" class="btn btn-mini btn-danger btn-forum-comment-del-comment"><i class="icon-remove-sign icon-white"></i> delete</a></div>
        </div>
        <div class="forum-comments">
            <div class="forum-author">By: Jared De La Cruz on Tuesday, July 09, 2013 1:17:40 PM</div>
            <div class="forum-owner">aae15c3ff2cf790b2c7fb61dbf1a83bfadbc59762622c4b39e25ba7e5fe434fd</div>
            <pre class="forum-body">2nd comment1</pre>
            <div class="btn-group"><a id="" class="btn btn-mini btn-danger btn-forum-comment-del-comment"><i class="icon-remove-sign icon-white"></i> delete</a></div>
        </div>
        <hr style="border-top: 1px dotted #b0b0b0;border-bottom: 0px">
    </div>

更新：新しいクラスの作成.forum-commentsと.forum-comment

var post = $(this).parents(".forum-comment");

と

$(this).parent().next(".forum-comments").toggle();

4

2 に答える 2

1

nextAllの代わりに使用してみてくださいnext

$(this).parent().nextAll(".forum-comments").toggle();

ドキュメントを確認する

于 2013-07-10T00:37:14.657 に答える