单击相同 Class 的多个实例不起作用

Question

我有一个菜单按钮在我放置了点击事件的网站上多次出现。

当我点击按钮时没有任何反应（当只有一个按钮实例时它工作正常）。我知道我需要遍历通过 class 的多个实例创建的节点列表，但是当我现在单击该按钮时，什么也没有发生，我也没有在控制台中收到任何错误指针？

Javascript 和 Codepen 中的简化图示如下。

代码笔：https://codepen.io/emilychews/pen/owWVGz

JS

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');
var $mainMenuButtonAll = function () { 
    for(h = 0; h < $mainMenuButton.length; h+=1) {
      $mainMenuButton[i];
    }
};

$mainMenuButtonAll.onclick = function () {

  $mainMenuButtonAll.style.background = "black";

};

任何帮助都会很棒。

艾米丽

Answer 1

我为您编辑了代码，请查看评论和 jsFiddle。

// get all the buttons with this tag name (or use class name)
var allButtons = document.getElementsByTagName('desktopmenubutton');

// add a click listener to each button
for(h = 0; h < allButtons.length; h+=1) {
    allButtons[h].addEventListener("click", function(e){
         console.log("yo yo");
           e.currentTarget.style.backgroundColor = "black";
    })
}

Answer 2

var $el = document.getElementsByClassName('desktopmenubutton');

// Solution 1
for (var i = 0; i < $el.length; i++) {
    // If on clicking any element, only that should change
    $el[i].onclick = function () {
        this.style.background = 'black';
    }
}

// Solution 2
for (var i = 0; i < $el.length; i++) {
    // If on clicking any element, all should change
    $el[i].onclick = function () {
        for (var j = 0; j < $el.length; j++) {
            $el[j].style.background = 'black'
        }
    }
}

首先，我们获取所有元素并分别为所有元素绑定单独的点击处理程序。当您只想更改单击的元素时使用解决方案 1，当您希望更改所有元素时使用解决方案 2。

Answer 3

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');

var $mainMenuButtonAll = function () { 
    for(h = 0; h < $mainMenuButton.length; h+=1) {
      $mainMenuButton[h].addEventListener("click", function(){
        this.style.background = 'black';
      });
    }
};


$mainMenuButtonAll();

您需要将按钮的每一次出现与事件点击绑定，以对其执行某些操作。

Answer 4

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');
for(var h = 0; h < $mainMenuButton.length; h++) {
   $mainMenuButton[h].addEventListener('click', function() {
      this.style.background = "black";
   });
}

这是一个工作示例。

我做了什么：

删除了 $mainMenuButtonAll 变量，因为它不需要。
使 for 循环中的 h 变量成为局部变量，而不是全局变量（更多关于 here）
为每个 $mainMenuButton 添加了一个事件侦听器，因为覆盖 onclick 事件从来都不是一件好事。

单击相同 Class 的多个实例不起作用

Clicking On Multiple Instances of the Same Class not Working

javascript

events

class

nodelist