JavaScript-getElementsByName

我试图通过本教程学习一些JavaScript并为我的网页创建一个模式

当我意识到他通过ID捕获元素，并且我有多个锚定标记，应该在单击时打开时，问题就出现了。我试图将ID改为name，但我意识到我得到了下一个代码，只有一个有效，我找不到解决方案。我找了好几个小时

如果您有关于如何以不同方式捕捉元素或如何解决此问题的建议，将非常有用

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.


});

---

首先，最好为此使用属性

class

：

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

然后，循环遍历每一个并添加事件侦听器，就像您所做的那样：

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

---

（是一个jQuery示例。）

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

document.querySelectorAll('.trigger')

或

document.querySelectorAll（'a[trigger]'））
像这样的html

“document.queryselectoral”采用CSS选择器。因此，如果可以通过CSS查询选择所需的项，则可以通过document.querySelectorAll（）进行选择

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

---

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

你的文章有拼写错误，整齐的缩进有帮助。通常最好使用类值而不是名称来选择多个元素。@ArunPJohny当我这样说时，它在源代码中表示triggerButton没有定义。@ArunPJohny啊，我在第一次定义变量时输入了错别字，我写的triggerButton应该是triggerButton。但是，解决方案实际上是可行的，jQuery是不必要的。是的，编写代码更少。但是需要100kb的库，效率要低得多。@RobG是的，它的代码更少，更直观（比循环）。它对代码的可维护性有很大帮助！另外，我只在jQuery已经被使用的情况下提供了它作为辅助建议。你不会仅仅为了这一行就下载整个库的。直观吗？不是真的。如果您知道$function的作用（并且由于它是重载的，当使用不同类型的参数调用时，它会做不同的事情），那么代码的作用就不清楚了。普通for循环没有这个问题。我看不出for循环的可维护性有多差。是的，我可以很好地作为ArunPJohny的解决方案。但如果有人能解释的话，我对其中的一部分感到有点困惑。我正在将一个名为all class的触发器存储到一个var triggerButtons中，然后我说onclick triggerButtons open myModal，但我不知道你到底在问什么，但我想你想知道的是，除了添加

class

属性之外，你不必编辑你的HTML。

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

document.querySelectorAll('.trigger')

document.querySelectorAll('a[trigger]') 

with html like this

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