modal.classList.remove('hidden') 不起作用答案

【问题标题】：modal.classList.remove('hidden') is not workingmodal.classList.remove('hidden') 不起作用
【发布时间】：2021-11-23 08:02:38
【问题描述】：

modal.classList.remove('hidden') 不起作用。

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const closeBtn = document.querySelector('.close');
const showBtns = document.querySelectorAll('.show-modal');

for (let i = 0; i < showBtns.length; i++) {
  showBtns[i].addEventListener('click', function () {
    console.log('Button Clicked');
    modal.classList.remove('hidden');
    console.log(modal.classList);
  });
}

.hidden {
    display: none;
}

<input type="button" class="show-modal" value="Show">
<div class="modal hidden">This is .modal</div>

【问题讨论】：

我已将您的代码粘贴到 Stack Snippet 中，添加了一个 class="modal hidden" 元素和一个 class="show-modal" 按钮。该代码有效。请使用minimal reproducible example 更新您的问题，通过编辑片段来展示问题更多关于提供 sn-ps here。

标签： javascript html jquery css

【解决方案1】：

您的脚本在第一次单击后很好地删除了hidden 类。但是如果你想在第二次点击后再次显示隐藏的元素，你必须使用toggle 而不是remove 来恢复 .hidden 类，再次隐藏它。

见documentation

编辑：在我的示例中，我还根据类替换了按钮的值。看线 showBtns[i].value = (modal.classList.contains('hidden')) ? "Show" : "Hide";

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const closeBtn = document.querySelector('.close');
const showBtns = document.querySelectorAll('.show-modal');

for (let i = 0; i < showBtns.length; i++) {
  showBtns[i].addEventListener('click', function () {
    console.log('Button Clicked');
    modal.classList.toggle('hidden');
    showBtns[i].value  = (modal.classList.contains('hidden')) ? "Show" : "Hide";
    console.log(modal.classList);
  });
}

.hidden {
    display: none;
}

<input type="button" class="show-modal" value="Show">
<div class="modal hidden">This is .modal</div>

【讨论】：