使用JavaScript函数的多个实例动态填充图像源

我的提琴中的弹出窗口效果很好，除非我想制作多个div，我必须用多个图像和多个id创建多个div，这很好，但很费时，也很混乱

编辑：每个弹出窗口将有不同的图像

我的目标是：

1） 仍然为每个弹出窗口创建多个ID/图像，但创建一个脚本动态计算ID的函数，因此我不会为每个ID创建单独的函数

或

2） 用javascript创建整个弹出式HTML标记，这将允许我使用数据属性动态填充弹出式窗口中的图像源。单击链接时，将创建弹出窗口，弹出窗口中的图像src可以动态填充该链接中的数据src

这些方法中有哪一种方向正确吗？我需要使用纯JS

来自fiddle的基本JS函数：

var popup = document.getElementById('light');
var background = document.getElementById('fade');

function popit() {

    popup.style.display = 'block';
    popup.style.top = parseInt(pageYOffset, 10) + 150;
    background.style.display = 'block';

}

function closeit() {

    popup.style.display = 'none';
    background.style.display = 'none';

}

---

给你的部门id如下：

 element.id = "image_div"+Math.round(Math.random()*10000);

现在，您可以使用以下选项选择所有div：

 var nodeList = document.querySelectorAll("div[id*='image_div']");

 for (var i = 0; i < nodeList.length; ++i)
 {
     nodeList[i].addEventListener("click", popit.bind(null, nodeList[i].id), false);
 }

---

为什么不使用

类而不是
ID
？这样，它就不必是唯一的。如果不使用jQuery，则必须使用
getElementsByClassName（）
，它将获取与该名称匹配的所有类的数组@OP您可以将参数传递给您的
popit（）
函数，参数是要显示的弹出窗口的ID。@按，不，他不是。。document.querySelectorAll（CSSSelector）。其中CSSSelector是一个类似于“div.className”的字符串，如果他使用相同的类名，它仍将获得具有相同名称的所有类。既然ID是唯一的，而且每个弹出窗口都是它自己的实例，为什么不使用ID并将其作为参数传递。每个弹出窗口都是它自己的实例，但每个弹出窗口的图像都会不同。不要麻烦绑定。。只需将popit用作处理程序。。鼠标单击事件将传递e.target作为元素
nodeList[i]。addEventListener（“click”，popit，false）”和“function popit（e）{var popup=e.target；…
在
id
属性上使用
*=
是一个非常好的迹象，表明您应该使用类来代替它。@BrettCaswell
e.target
只有在元素中没有子元素时才能正常工作。否则，您需要额外的编码来检查目标是否是父元素而不是它的子元素。no、 。这与引发事件的元素无关。您正在将事件附加到节点列表中的每个元素。e.target将是引发事件的元素
function popit(popId) {
   var node = document.getElementById(popId);
   popup.style.display = 'block';
   popup.style.top = parseInt(pageYOffset, 10) + 150;
   background.style.display = 'block';

}