JavaScript - getElementsByName

Question

我试图通过本教程学习一些 JavaScript 并为我的网页制作一个模式 Building Your Own JavaScript Modal Plugin

当我意识到他通过 ID 捕获元素并且我有多个 anchor 标记应该在单击时打开模式时，问题实际上出现在最后。我尝试将 ID 更改为名称，但我意识到我得到了下一个代码，但只有一个有效，而且我找不到解决方案。我搜索了几个小时。

如果您有关于如何以不同方式捕获元素或如何解决这个问题的建议，将会很有帮助。

var triggerButton = document.getElementsByName('trigger');

triggerButton[0].addEventListener('click', function() {
myModal.open();

triggerButton[1].addEventListener('click', function() {
myModal.open(); // if i put like this etc all my links work and etc.


});

Answer 1

首先，最好使用属性class:

<a class="trigger"> ... </a>

然后，在 JS 中，使用以下命令获取它们:

var triggerButtons = document.getElementsByClassName("trigger");

然后，循环遍历每个事件并像您一样添加事件监听器:

for(var i = 0; i < triggerButtons.length; i++) {
    triggerButton[i].addEventListener('click', function() {
        myModal.open();
    });
}

( Here 是一个有效的 JS 示例。)

这是动态的，比手动为每个元素添加事件监听器要容易得多。

如果你想在 jQuery 中做到这一点，这会容易得多。您可以通过这句话实现这一切:

$(".triggerButtons").click(function(){myModal.open();});

( Here 是一个 jQuery 示例。)