Javascript 在循环到数组时添加类

我有一个由一些div组成的列表，所有div都有一个与class.lnkInfo的信息链接。当单击时，它应该触发一个函数，将类show添加到另一个div中，就像某种弹出窗口一样，使其可见，当再次单击时，它应该将其隐藏

我很确定这一定是一件非常基本的事情，很可能我会被嘲笑……但是嘿！一旦我把这个记下来，我就再也不用问了。无论如何，我开始离开html和css的安全性，开始学习JS、PHP等，我遇到了一点问题

在它开始工作之前测试它时，直到我添加了另一个div，它只与第一个div一起工作，读了一点，并提出了一些建议，我意识到它一定与数组有关，问题是我不太确定实现可视化的语法

任何帮助都将不胜感激

这是我的JS代码，下面我将讨论html的外观，以防万一

var infoLab = document.getElementsByClassName('lnkInfo'),
closeInfo = document.getElementById('btnCerrar'); 

infoLab.addEventListener('click', function () {

    for (var i = 0 ; i < infoLab.length; i++) {
        var links = infoLab[i];

        displayPopUp('popUpCorrecto1', 'infoLab[i]');
    };
});

function displayPopUp(pIdDiv, infoLab[i]){
var display = document.getElementById(pIdDiv),

for (var i = 0 ; i < infoLab.length; i++) {
    infoLab[i]

 newClass ='';
 newClass = display.className.replace('hide','');
 display.className = newClass + ' show';
  };
}

编辑2：

对于这个问题的未来读者

如果你能在时空中找到这个答案，要知道这就是解决方案的最终结果，愿它能帮助你不再成为一个傻瓜

---

下面是一个基本的工作示例，说明如何在给定当前代码的特定元素上单击后显示弹出窗口。请注意，我向link元素添加了一个id

// Select the element.
var infoLink1 = document.getElementById('infoLink1'); 

// Add an event listener to that element.
infoLink1.addEventListener('click', function () {
    displayPopUp('popUpCorrecto1');
});

// Display a the popup by removing it's default "hide"
// class and adding a "show" class.
function displayPopUp(pIdDiv) {
    var display = document.getElementById(pIdDiv);
    var newClass = display.className.replace('hide', '');
    display.className = newClass + ' show';
}

有多种方法可以将其推广到所有链接/弹出窗口。您可以向每个链接元素添加数据链接编号=1、数据链接编号=2等。选择包含所有链接的元素。绑定到该元素一个事件监听器，当单击该监听器时，该监听器将检测单击的链接元素请参见。您可以根据数据链接编号属性的值确定单击了哪个链接。然后显示相应的弹出窗口

---

您可能还想为此使用。通过设置元素的className属性来更改元素的类会导致DOM代码变得脆弱。这是一个可行的方法。jQuery的事件也可以跨浏览器工作；element.addEventListener将无法在IE8中工作，因为IE8仍占有很大的市场份额。

非常感谢您的回复！我肯定会把这些参考资料加入书签。唯一的问题是box元素div是由PHP生成的，我需要一个静态类或id，这样我就可以调用一个使用lnkLink的jQuery函数。哇，如果掌握了委托方法，它看起来肯定是强大且非常有用的工具，多亏了这个工具，我认为这可能接近我需要的。你的jQuery函数需要修改。您需要检测单击了哪个链接。您似乎已尝试使用var id=$'txtId.val；，但是请注意，您有两个id为txtId的元素。当您使用jQuery尝试选择元素时，它无法确定您想要哪个元素。你需要区分元素；或者，更好的方法是在链接上使用数据属性，而不是生成虚拟链接。^这不会使用委派，但可能也会起作用。非常感谢！当我注意到它只是从第一个div中获取数据时，我可以从任何链接中弹出，当我读到你的评论时，它告诉我我害怕什么。我可能不得不重新阅读这篇数据文章，因为它有点让我不知所措。你认为我可以利用这个网站内的聊天来问你一个关于我的jQuery的小问题吗？

// Select the element.
var infoLink1 = document.getElementById('infoLink1'); 

// Add an event listener to that element.
infoLink1.addEventListener('click', function () {
    displayPopUp('popUpCorrecto1');
});

// Display a the popup by removing it's default "hide"
// class and adding a "show" class.
function displayPopUp(pIdDiv) {
    var display = document.getElementById(pIdDiv);
    var newClass = display.className.replace('hide', '');
    display.className = newClass + ' show';
}