试图缩短我的代码以使多个模式能够使用javascript

Question

我正在尝试在5张图像上制作模态内容，我已经尝试了几个小时以使用for循环来缩短代码，但是我仍然有很多行不知道如何缩短。我只是从javascript开始。这是我的下面代码，可以正常工作，但时间太长。

var modal = [];
for (i=0; i<5; i++)
{
    modal[i] = document.getElementById('simplemodal'+i);
}

var modalbtn = [];
for (i=0; i<5; i++) {
    modalbtn[i] = document.getElementById('pics-post'+i);
    modalbtn[i].addEventListener('click', eval('openmodal'+i));
    window.addEventListener('click', eval('clickoutside'+i));
}


var closebtn0 = document.getElementsByClassName('closebtn')[0];
var closebtn1 = document.getElementsByClassName('closebtn')[1];
var closebtn2 = document.getElementsByClassName('closebtn')[2];
var closebtn3 = document.getElementsByClassName('closebtn')[3];
var closebtn4 = document.getElementsByClassName('closebtn')[4];


for (i=0; i<5; i++) {
    eval('closebtn'+i.addEventListener('click', eval('closemodal'+i)));
}


function openmodal0(){
    modal[0].style.display = 'block';
}
function openmodal1(){
    modal[1].style.display = 'block';
}
function openmodal2(){
    modal[2].style.display = 'block';
}
function openmodal3(){
    modal[3].style.display = 'block';
}
function openmodal4(){
    modal[4].style.display = 'block';
}


function closemodal0(){
    modal[0].style.display = 'none';
}
function closemodal1(){
    modal[1].style.display = 'none';
}
function closemodal2(){
    modal[2].style.display = 'none';
}
function closemodal3(){
    modal[3].style.display = 'none';
}
function closemodal4(){
    modal[4].style.display = 'none';
}
function closemodal5(){
    modal[5].style.display = 'none';
}


function clickoutside0(e){
    if(e.target == modal[0])
        modal[0].style.display = 'none';
}
function clickoutside1(e){
    if(e.target == modal[1])
        modal[1].style.display = 'none';
}
function clickoutside2(e){
    if(e.target == modal[2])
        modal[2].style.display = 'none';
}
function clickoutside3(e){
    if(e.target == modal[3])
        modal[3].style.display = 'none';
}
function clickoutside4(e){
    if(e.target == modal[4])
        modal[4].style.display = 'none';
}

我试图使用eval来增加变量名，但找不到正确的方法来使它起作用。

Answer 1

您可以将所有内容放入一个循环中并使用匿名函数。

var modal = [];
var modalbtn = [];
var closebtn = [];
for (i=0; i<5; i++) {

    modal[i] = document.getElementById('simplemodal'+i);

    modalbtn[i] = document.getElementById('pics-post'+i);
    modalbtn[i].addEventListener('click', () => {
        modal[i].style.display = 'block';
    });
    window.addEventListener('click', eval('clickoutside'+i));

    closebtn[i] = document.getElementsByClassName('closebtn')[i];
    closebtn[i].addEventListener('click', () => {
        modal[i].style.display = 'none';
    });
}

Answer 2

您可以将模式编号/ id作为参数传递给函数。这样，对于所有模态，每个动作只需要一个功能。

modalbtn[i].addEventListener('click', function () {
    openmodal(i);
}

function openmodal(modalId) {
    modal[modalId].style.display = 'block';

}

---

您还可以将一个类添加到您的模式中，然后将事件侦听器绑定到该类的所有内容。然后使用数据属性或使用ID（如果需要）来获取特定的模式。

Answer 3

您可以使用通用功能来打开和关闭模型，例如：

function openmodel (i) {
  model[i].style.display = 'block'
}

function clickoutside(e, i){
    if(e.target == modal[i])
        modal[i].style.display = 'none';
}

并更改您的事件监听器，例如：

modalbtn[i].addEventListener('click', function () {
  openmodel(i)
})
window.addEventListener('click', function (e) {
   clickoutside(e, i)
})

并且对此感兴趣

eval('closebtn'+i.addEventListener('click', eval('closemodal'+i)))

您可以使用：

var closebtn = document.getElementsByClassName('closebtn')
for (let i = 0; i < closebtn.length; i++) {
  closebtn[i].addEventListener('click', function () {
    closeModel(i)
  })
}

并更改closeModel函数，如：

function closemodal(i){
    modal[i].style.display = 'none';
}