Question

我小提琴中的弹出窗口效果很好，除非我想制作多个，我必须创建多个具有多个图像和多个ID的div，这样可以正常工作但很耗时。

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

我的目标是：

1）仍然为每个弹出窗口创建多个ID /图像，但是创建一个函数，其中脚本动态地计算出ID，所以我没有为每个ID创建单独的函数。

OR

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

这些方法中的任何一种都朝着正确的方向发展吗？我需要使用纯JS。

http://jsfiddle.net/6sh0dogr/5/

小提琴的基本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';

}

Answer 1

给你的div这样的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);
 }

div[id*='image_div']是一个选择器。 *=表示包含。因此，此选择器会选择包含id的所有div元素image_div。

现在我们可以使用遍历nodeList的for循环将事件处理程序（单击）附加到所有div。 div的id通过bind函数传递给函数popit。

function popit(popId) {
   var node = document.getElementById(popId);
   popup.style.display = 'block';
   popup.style.top = parseInt(pageYOffset, 10) + 150;
   background.style.display = 'block';

}

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

1 个答案: