试图缩短我的代码以使多个模式工作 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的主要内容,如果未能解决你的问题,请参考以下文章

在Mongodb中使用多个模式进行单个集合无法正常工作

我怎样才能缩短“foreach”以便它只显示 3 件事?

Android - 在多个活动中访问数组

C ++:灵活且能够存储多种数据类型的数组[关闭]

核心数据 NSFetchedResultsController 代码缩短

前端性能优化