我還在學習js，我想找到一種方法來減少我放在下面的所有代碼，我想打開不同的模態并在html中關閉它們。
在打開模態部分，如您所見，我為每個模態創建了一個函式，其中“varEdit-button”是我分配給每個按鈕以打開它們的 ID，“var-modal”ID 是我分配給每個不同模態的 ID容器。
在關閉模式部分，“close-varModal”是我分配給每個關閉容器的 ID，“var-modal”再次是每個模式容器的 ID。
我想用 for 回圈或 js 的另一個屬性來減少代碼。
例如，我試圖通過.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';
})
uj5u.com熱心網友回復：
一種選擇是為打開和關閉按鈕提供一個屬性，可能在資料集中，指定要打開/關閉的元素的 ID 或（唯一）類。例如：
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根據需要調整s。
您還可以調整邏輯，以便單擊任何按鈕將切換目標的當前狀態，如果需要，將單擊偵聽器內的行簡化為
target.classList.toggle('closed');
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318138.html
標籤：javascript html dom dom事件