Vanilla JS（无 jQuery）- 如何一次切换多个 class？

Question

我正在处理遗留系统，我无法重写整个系统 css。

所以我发现自己需要在单击另一个元素时在同一元素上切换 2 个 classes（想象一下单击按钮以 hide/show 模式）。

以下是模态的代码。
默认情况下，模态 window 是 .hidden（没有 class "visible"），点击它是 .visible（没有 class "hidden").

function openModal(modalID) {
  document.getElementById(modalID)
    .classList.toggle('hidden');

  document.getElementById(modalID)
    .classList.toggle('visible');
}

I agree to accept the
<a href="#" 
   onclick="openModal('tandcmodal')">
       terms and conditions
</a>
of this website.



<div id="tandcmodal"
     class="hidden">
    Content of the modal
</div>

所以，我相信一定有一种方法可以使用 .toggle().
一次切换多个 class 还是不是？

Answer 1

不幸的是，.toggle accepts only one argument：您要切换的那个 class 名字。要 DRY，您必须遍历 class 名称数组，或者将 classList 保存在变量中并调用 .toggle 两次：

function openModal(modalID) {
  const { classList } = document.getElementById(modalID);
  classList.toggle('hidden');
  classList.toggle('visible');
}

.hidden {
  display: none;
}
.visible {
  display: block;
}

I agree to accept the
<a href="#" onclick="openModal('tandcmodal')">
       terms and conditions
</a> of this website.



<div id="tandcmodal" class="hidden">
  Content of the modal
</div>

但请注意，通常不需要同时使用 hidden 和 visible class。通常你可以 just a hidden class, 并添加/删除它，让默认显示样式在 hidden 未激活时生效:

function openModal(modalID) {
  document.getElementById(modalID).classList.toggle('hidden');
}

.hidden {
  display: none;
}

I agree to accept the
<a href="#" onclick="openModal('tandcmodal')">
       terms and conditions
</a> of this website.



<div id="tandcmodal" class="hidden">
  Content of the modal
</div>

另请注意，内联属性处理程序的行为 very 很奇怪，存在转义问题，并且通常被认为是非常糟糕的做法 - 在几乎所有情况下都应该避免使用它们。考虑使用 Javascript 添加事件侦听器：

document.querySelector('a').addEventListener('click', () => openModal('tandcmodal'));
function openModal(modalID) {
  document.getElementById(modalID).classList.toggle('hidden');
}

.hidden {
  display: none;
}

I agree to accept the
<a href="#">
       terms and conditions
</a> of this website.



<div id="tandcmodal" class="hidden">
  Content of the modal
</div>

Vanilla JS（无 jQuery）- 如何一次切换多个 class？

Vanilla JS (no jQuery) - How to toggle more than one class at once?

javascript

jquery

modal-dialog