Question

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

当我意识到他通过ID捕获元素并且我有多个锚点标签应该在点击时打开模态时，问题实际上到了最后。我试图将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示例。）

Answer 2

最简单的方法是使用querySelectorAll函数选择所需的内容。

document.querySelectorAll('.trigger')

或

document.querySelectorAll('a[trigger]') 

with html like this

<a href="//blah" trigger="haha"></a>

＆＃34; document.querySelectorAll＆＃34;采用CSS选择器。因此，如果您可以使用CSS查询选择所需的项目，则可以使用document.querySelectorAll（）选择它。

现在，querySelectorAll返回与您的查询匹配的项目数组。如果匹配为零，则会得到一个空数组。如果你有10个匹配项，它们都将在数组中。

如果您只想匹配一个元素，可以使用document.querySelector（）（不要使用All）。这将只选择一个元素。它通过传递一个CSS选择器以相同的方式工作。

JavaScript - getElementsByName

2 个答案: