Question

我习惯使用jQuery，但我正在尝试回到vanilla javascript。我有一个链接，点击后会显示一个帐户模式。

我还想在点击“模态可见”时更改模态的类。这可以按预期工作，但是当我再次单击链接以关闭模态时，我需要将类更改回“模态隐藏”。

我想知道是否有人可以帮助我。也许它需要切换呢？

var accountModal = document.getElementById("account-modal");
document.querySelector('#account-photo').addEventListener('click', function(e) {
    e.preventDefault();
    accountModal.classList.add('modal-visible');
    accountModal.classList.remove('modal-hidden');
    accountModal.setAttribute('aria-hidden', 'false');
});

<a id="account-photo" href="/customer" tabindex="0" aria-expanded="false">Account</a>
<div id="account-modal" class="modal-visible" aria-label="Account Information" aria-hidden="false">Account Info</div>

Answer 1

如果我们假设它始终开始关闭，这是一种方法：

document.querySelector('#account-photo').addEventListener('click', function() {var is_visible = false; return function(e) {
    e.preventDefault();
    if(!is_visible) {
      accountModal.classList.add('modal-visible');
      accountModal.classList.remove('modal-hidden');
      accountModal.setAttribute('aria-hidden', !is_visible);
      is_visible = true;
    } else {
      accountModal.classList.remove('modal-visible');
      accountModal.classList.add('modal-hidden');
      accountModal.setAttribute('aria-hidden', !is_visible);
      is_visible = false;
    }
}});

此方法基本上用作手动编码切换。

用vanilla javascript切换模态

1 个答案: