Question

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

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

下面是Codepen中的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事件永远不会好。

单击同一类的多个实例不起作用

4 个答案: