0

我试图通过本教程构建您自己的 JavaScript 模态插件来学习一些 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.


});
4

2 回答 2

2

首先，最好为此使用属性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 示例。）

于 2015-10-30T03:18:31.270 回答
0

最简单的方法是使用 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 选择器。

于 2015-10-30T03:22:01.830 回答