JavaScript

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

最简单的方法是 select 使用 querySelectorAll 函数实现您想要的。

document.querySelectorAll('.trigger')

或

document.querySelectorAll('a[trigger]') 

with html like this

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

"document.querySelectorAll" 需要 CSS select 或者。因此，如果您可以使用 CSS 查询 select 您想要的项目，则可以使用 document.querySelectorAll() select 它。

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

如果你只想匹配一个元素，你可以使用document.querySelector()（去掉All）。那将 select 只有一个元素。它的工作方式相同，通过传递一个 CSS selector。

JavaScript - getElementsByName

JavaScript - getElementsByName

nodelist

getelementsbyname