使用js打开和关闭模态的更有效方法

Question

我还在学习js，我想找到一种方法来减少我放在下面的所有代码，我想打开不同的模式并在html中关闭它们。

如您所见，在“打开模式”部分中，我为每个模式创建了一个函数，其中“varEdit-button”是我分配给每个按钮以打开它们的 ID，“var-modal”ID 是我使用的 ID分配给每个不同的模态容器。

在关闭模式部分，“close-varModal”是我分配给每个关闭容器的 ID，“var-modal”也是每个模式容器的 ID。

我想用 for 循环或另一个属性 js 来减少代码。

例如，我试图通过将相同的 class .close 分配给所有关闭容器来关闭所有模态，但只有我打开的第一个模态可以关闭，如果有人知道为什么发生这种语言我会很感激！

//OPEN MODALS
document.getElementById('imageEdit-button').addEventListener('click',
    function (){
    document.querySelector('#pic-modal').style.display = 'flex';
    });

document.getElementById('curpEdit-button').addEventListener('click',
    function (){
    document.querySelector('#curp-modal').style.display = 'flex';
    });

document.getElementById('phoneEdit-button').addEventListener('click',
    function (){
    document.querySelector('#phone-modal').style.display = 'flex';
    });

document.getElementById('addressEdit-button').addEventListener('click',
    function (){
    document.querySelector('#address-modal').style.display = 'flex';
    });



// CLOSE MODALS
document.querySelector('#close-picModal').addEventListener('click',
    function (){
    document.querySelector('#pic-modal').style.display = 'none';
    });

document.querySelector('#close-curpModal').addEventListener('click',
    function (){
    document.querySelector('#curp-modal').style.display = 'none';
    });

document.querySelector('#close-phoneModal').addEventListener('click',
    function (){
    document.querySelector('#phone-modal').style.display = 'none';
    })

document.querySelector('#close-addressModal').addEventListener('click',
    function (){
    document.querySelector('#address-modal').style.display = 'none';
    })

Answer 1

一个选项是为打开和关闭按钮提供一个属性，可能在数据集中，该属性将元素的 ID 或（唯一）class 指定为 open/close。例如：

for (const button of document.querySelectorAll('button[data-target]')) {
  button.addEventListener('click', () => {
    const target = document.querySelector('#' + button.dataset.target);
    target.classList[button.matches('.close') ? 'add' : 'remove']('closed');
  });
}

.closed {
  display: none;
}

<button data-target="imageEdit">open image edit</button>
<div id="imageEdit" class="closed">
  <h3>image edit</h3>
  <button class="close" data-target="imageEdit">close</button>
</div>

对于其他部分，只需添加更多 HTML，根据需要调整 data-target。

您还可以调整逻辑，以便点击任何按钮都会切换目标的当前状态，如果您愿意，可以将点击监听器中的行简化为

target.classList.toggle('closed');

使用js打开和关闭模态的更有效方法

More effective way to open and close modals with js

html

javascript

dom

dom-events