单击链接时显示div仅适用于列表的第一个

Question

我在查找代码问题时遇到了一些麻烦，当我单击div上的链接（id = lnkInfo）时，它应该显示一个隐藏的popUp，问题是它仅适用于第一个div，而不适用于给名单上的其他人。

这是我用来隐藏显示的代码：JS

---

function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}

function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';
}

所说的div是通过php创建的，弹出窗口中的信息也是如此，因此，为了确切显示正在发生的事情，我用两个div时的外观做了一个小提琴，实验室div的id永远是最后一个的id + 1。

小提琴编辑

我知道我应该使用类而不是id，但是这样做会使JS部分出现故障，即使我使用querySelector或getByClass。

任何帮助将不胜感激！ 提前致谢。

编辑：

因此，我正在考虑按照这些思路做一些建议，并将更改应用到每个元素。 请确保这不是我将阵列连接到displayPopUp的方式。

var elementoVerInfo = document.getElementsByClassName('lnkInfo'),
elementoBotonCerrar = document.getElementById('btnCerrar'); 

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

    for (var i = 0 ; i < elementoVerInfo.length; i++) {
        elementoVerInfo[i].displayPopUp('popUpCorrecto1');
    };
});

Answer 1

ID必须是唯一的。

您将不得不将id更改为一个类，并使用诸如document.getElementsByClassName类的东西