试图缩短我的代码以使多个模式工作 javascript
Posted
技术标签:
【中文标题】试图缩短我的代码以使多个模式工作 javascript【英文标题】:Trying to shorten my code to make multiple modals work javascript 【发布时间】:2020-01-16 15:34:48 【问题描述】:我正在尝试在 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 来增加变量名称,但无法找到正确的方法来使其工作。
【问题讨论】:
【参考方案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';
);
【讨论】:
【参考方案2】:您可以使用通用函数来打开模型和关闭模型,例如:
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';
【讨论】:
以上是关于试图缩短我的代码以使多个模式工作 javascript的主要内容,如果未能解决你的问题,请参考以下文章