Javascript 如何自动检测DOM中的元素以填充常量数组？

我已经编写了一个脚本，它几乎可以独立工作，但问题是如果我向页面添加另一个模式，我需要进入脚本中添加一个条目，以便它能够识别。我想知道是否有办法让脚本自动检测页面上的modal数量，并在我的const中自动为它们分配适当的值，然后根据脚本的指示对它们运行函数。这是我的密码

//人员模态元素数组
const modalClose=document.querySelectorAll（'.modal close'）；
const modalButton=document.queryselectoral（“.staff模态按钮p”）
const modalMain=document.queryselectoral（“.staff modal”）
//人员模态组合定义数组
const staffModal={one:{button:modalButton[0]，modal:modalMain[0]，close:modalClose[0]}，
两个：{button:modalButton[1]，modal:modalMain[1]，close:modalClose[1]}，
三：{button:modalButton[2]，modal:modalMain[2]，close:modalClose[2]}，
四：{button:modalButton[3]，modal:modalMain[3]，close:modalClose[3]}，
五：{button:modalButton[4]，modal:modalMain[4]，close:modalClose[4]}，
六：{button:modalButton[5]，modal:modalMain[5]，close:modalClose[5]}，
七：{button:modalButton[6]，modal:modalMain[6]，close:modalClose[6]}
//函数定义模态动作
函数modalFunction（员工编号）{
const modalOpen=staffNumber.button；
const modal=staffNumber.modal；
const modalExit=staffNumber.close；
modalOpen.addEventListener（'click'，function（）{
modal.style.display='flex'；
})
addEventListener（'click'，function（）{
modal.style.display='none'；
})
modal.addEventListener（'click'，函数（e）{
如果（例如，目标==模态）{
modal.style.display='none'
}
})
}
//为数组中的每个Staff模式调用函数
对于（我在staffModal）{
模态函数（staffModal[i]）；
}

您已经使用

document.querySelectorAll（'.staff modal'）

选择了所有模态。无需手动编写您的

staffModal

对象，只需迭代您选择的所有内容：

for (let i = 0; i < modalMain.length; i++) {
    modalFunction({button: modalButton[i], modal: modalMain[i] , close: modalClose[i]});
}

for（设i=0；i

此外，我不会从所有情态动词中选择所有元素，并假设它们的顺序相同。我不确定是否真的存在一些奇怪的情况，但最好是选择父模式，然后选择子模式。像这样：

const modalMain = document.querySelectorAll('.staff-modal');

function modalFunction(modal) {
    const modalOpen = modal.querySelector('.staff-modal-button p');
    const modalExit = modal.querySelector('.modal-close');
    modalOpen.addEventListener('click', function() {
        modal.style.display='flex';
    })
    modalExit.addEventListener('click', function() {
        modal.style.display='none';
    })
    modal.addEventListener('click', function(e) {
        if (e.target == modal) {
            modal.style.display='none'
        }
    })
}

for (let i = 0; i < modalMain.length; i++) {
    modalFunction(modalMain[i]);
}

const modalMain=document.queryselectoral（'.staff modal'）；
功能模态功能（模态）{
const modalOpen=modal.querySelector（'.staff modal按钮p'）；
const modalExit=modal.querySelector（'.modal close'）；
modalOpen.addEventListener（'click'，function（）{
modal.style.display='flex'；
})
addEventListener（'click'，function（）{
modal.style.display='none'；
})
modal.addEventListener（'click'，函数（e）{
如果（例如，目标==模态）{
modal.style.display='none'
}
})
}
for（设i=0；i

您已经使用

.querySelectorAll（）

从html中获取所有模态，这样您就可以确切地知道页面上有多少模态。线索是将staffModal设置为数组，这样您就不必创建像1/2/3这样的属性名，只需使用索引即可。@Shilly这完全有道理。非常感谢。这是一个非常好的解决方案。但是，我的模态打开元素在模态父元素之外，因此我仍将选择它们作为常量，但您为我省去了选择模态关闭按钮的麻烦，因为它们包含在模态父元素中。非常感谢你！