$.toggle() 一个类的所有实例

Posted 2023-02-25

【中文标题】$.toggle() 一个类的所有实例

【英文标题】：$.toggle() all instances of a class

【发布时间】：2013-07-09 21:57:11

【问题描述】：

您好，我正在尝试切换隐藏显示 cmets，我最初让它工作得很好，因为我将我的所有 cmets 都放在一个具有 .forum-comments 类的单个 div 中。

但是，现在我将每个评论与具有 .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>

这些 cmets 默认使用 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();

【问题讨论】：

您使用的是什么版本的 jQuery？从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。

乍一看像是.each() 的工作。见api.jquery.com/each

你的 .btn-forum-comment-show 在哪里

.btn-forum-comment-show 比此代码高一级

【参考方案1】：

替换此行

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

与

var $parent = $(this).parent();
$parent.next(".forum-comments").length ? $parent.next(".forum-comments").toggle()
                                       : $parent.prev(".forum-comments").toggle()

最后一个评论部分将不起作用，因为$parent.next(".forum-comments") 将评估为空选择器。所以在这种情况下是行不通的

【讨论】：

这对我不起作用，它仍然只切换 1，因为 .forum-comments 只包含 1 条评论。我有多个 cmets

【参考方案2】：

尝试使用nextAll 而不是next

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

查看document