JavaScript - getElementsByName

Question

我试图学习一些JavaScript，并通过本教程构建自己的JavaScript模式插件为我的网页建立一个模式。

这个问题实际上是在我意识到他按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();
    });
}

(这里是一个实用的JS示例。)

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

如果您想在jQuery中做到这一点，这就容易多了。您可以通过这个一行程序来实现这一切：

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

(这里是一个jQuery示例。)

Answer 2

最简单的方法是使用querySelectorAll函数选择您想要的内容。

document.querySelectorAll('.trigger')

或

document.querySelectorAll('a[trigger]') 

with html like this

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

"document.querySelectorAll“采用CSS选择器。因此，如果可以使用CSS查询来选择所需的项，则可以使用document.querySelectorAll()来选择它。

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

如果只想匹配一个元素，可以使用document.querySelector() (关闭All)。它只会选择一个元素。通过传递CSS选择器，它的工作方式也是一样的。