Question

我是JavaScript的新手，请原谅我，如果我的问题听起来很愚蠢。我在

表示的页面上有各种图标（同一个图标一次又一次地重复）

<img src="/images/info_icon.gif" id="tooltip_icon" alt="hee haa">
<img src="/images/info_icon.gif" id="tooltip_icon" alt="hee haa">
<img src="/images/info_icon.gif" id="tooltip_icon" alt="hee haa">

现在，我想调用一个javascript函数，当我点击任何这些图标时会打开一个弹出窗口 -

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("tooltip_icon");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

现在，因为我试图通过ID获取元素，所以当我点击其他时，只有一个图标在点击时会产生模态，而函数未被调用（显然）。

如果我点击任何图标，我希望调用相同的功能。

我如何实现这一目标？请在此处找到我的代码 - https://jsfiddle.net/up5bd22s/1/

提前致谢！

Answer 1

您可以使用class属性代替id，并将事件侦听器添加到与class匹配的所有元素，如下所示。

https://jsfiddle.net/up5bd22s/2/

function showPopup(){
 modal.style.display = "block";
}

var btns = document.getElementsByClassName("tooltip_icon");


for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', showPopup, false);
}

Answer 2

您不能在不同的元素上使用多个相同的id - 它是无效的HTML。 id意味着唯一 - 很像社交安全号码是唯一身份证明的形式。

我认为你想获得元素的集合，然后迭代它们来更新它们的onclick。我建议重构这样的东西

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementsByClassName(".tooltip_icon");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
function displayModal() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
function hideModal() {
    modal.style.display = "none";
}

for (var i=0; i<btn.length; i++) {
    btn[i].onclick = displayModal;
}

span.onclick = hideModal;

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        hideModal();
    }
}

（当然，这是在将重复的id更新为类之后。）

为同一HTML页面上的不同按钮调用相同的onClick函数

2 个答案: