javascript - 如何切换类的样式？

Question

我在聊天框中有一个段落列表:

<div id=chatbox>
    <p><i>15:21</i><b data-c=john>john</b>: hello jack</p>
    <p><i>15:22</i>i want to tell you something</p>
    <p><i>17:17</i><b data-c=jack>jack</b>: hi john.</p>
    <p class=hidden><i>20:15</i>Ο <span data-c=server>server</span> alex joined the chat</p>
    <p><i>17:17</i><b data-c=alex>alex</b>: hi all of you.</p>
</div>

我想要一个切换按钮来显示/隐藏隐藏的元素。有没有办法将 hidden 类的样式从 display:none 切换到 display:inline 并向后切换？

请注意，如果我将所有现有的 class=hidden 更改为可见，当 AJAX 带来新的隐藏线时，它仍然会隐藏，与之前的元素形成对比。有没有办法改变类样式的内容？

Answer 1

让 javascript 遍历所有元素来更改显示是一个非常糟糕的主意，而您只需在父元素上切换一个类就可以非常轻松地做到这一点。

Here's the codepen demo

单击按钮时，您只需切换 #chatbox 元素上的 showHidden 类，然后使用 CSS 隐藏或显示其中的所有隐藏元素.

CSS:

.hidden {
  display: none;
}

#chatbox.showHidden .hidden {
  display: inline;
}

jQuery:

$(document).ready( function() {

  $('.toggleButton').on('click', function(){
    $('#chatbox').toggleClass('showHidden');
  });

});