试图缩短代码以使多个模态在javascript中工作
我试图在5张图片上制作模式内容,我已经尝试了几个小时用for循环来缩短代码,但是我仍然有很多行,我不知道如何缩短。我只是从javascript开始。这是我下面的代码,可以工作,但是太长了试图缩短代码以使多个模态在javascript中工作,javascript,for-loop,variables,short,Javascript,For Loop,Variables,Short,我试图在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++) { modalbt
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';
}
var model=[];
对于(i=0;i,您可以将所有内容放入单个循环并使用匿名函数
var model=[];
var modalbtn=[];
var closebtn=[];
对于(i=0;i{
模态[i].style.display='block';
});
window.addEventListener('click',eval('clickout'+i));
closebtn[i]=document.getElementsByClassName('closebtn')[i];
closebtn[i].addEventListener('单击',()=>{
模态[i].style.display='none';
});
}
打开模型和关闭模型可以使用一个通用功能,如:
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)
})
}
function closemodal(i){
modal[i].style.display = 'none';
}