JavaScript - getElementsByName

标签 javascript nodelist getelementsbyname

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

当我意识到他通过 ID 捕获元素并且我有多个 anchor 标记应该在单击时打开模式时,问题实际上出现在最后。我尝试将 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.


});

最佳答案

首先,最好使用属性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 示例。)

关于JavaScript - getElementsByName,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33428058/

相关文章:

C# 根据名称获取元素

javascript - 使用 Reflect.defineProperty 而不是 Object.defineProperty 更好吗?

javascript - 当 Bootstrap 中触发两个模态时,如何关闭其中一个模态

javascript - 一页上的多个幻灯片效果不好

javascript - 在打砖 block 游戏中找到距离球最近的砖 block

javascript - 使用 getElementsByName 获取多个元素,更改它们的名称会得到奇怪的结果

javascript - 如何从html表单中获取多个复选框的值

javascript - 将 Nodelist 转换为 Array 并将新类附加到每个 Node

javascript - document.getElementsByClassName 返回未定义

javascript - Android WebView 编译表单并使用 Javascript 提交