Question

我在找到我的代码有什么问题时遇到了一些麻烦，当我点击一个div上的链接（id = lnkInfo）时它应该显示一个隐藏的popUp，问题是它只适用于第一个div而不是列表中的其他人。

这是我用来隐藏nd显示的代码： 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 + 1。

Fiddle EDITED

我知道我应该使用类而不是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

之类的内容

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

1 个答案: