我试图通过本教程学习一些 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/