Question

我想调用一个在具有相同类的元素的节点列表上切换的函数。我基本上需要在if else语句中添加该函数，但是这个的不同变体似乎会抛出错误。当我将两个函数内部的代码直接放入if else语句时，它可以工作，但我想用函数来完成它，因为这是更复杂的样式更改的简化版本。

Codepen在这里：https://codepen.io/emilychews/pen/GEEpqW?editors=1111

代码如下：

JS

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

function newColor() {
  e.currentTarget.style.background = "black";
}

function originalColor() {
  e.currentTarget.style.background = "red";
}

for (h = 0; h < $mainMenuButton.length; h +=1) {
  $mainMenuButton[h].addEventListener('click', function(e) {
    if (e.currentTarget.style.backgroundColor === "red") {
      newColor();
    } else {
      originalColor();
    }
  });
}

CSS

* {font-family: arial;}

.desktopmenubutton {
  width: 150px;
  height: 100px;
  background-color: red;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white
}

.button2 {
  left: 300px;
}

HTML

<div class="desktopmenubutton button1">Button 1</div>
<div class="desktopmenubutton button2">Button 2</div>

Answer 1

将元素传递给if语句中的函数。

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

    function newColor(element) {
      element.currentTarget.style.backgroundColor = "black";
    }

    function originalColor(element) {
      element.currentTarget.style.backgroundColor = "red";
    }

    for (h = 0; h < $mainMenuButton.length; h +=1) {
      $mainMenuButton[h].addEventListener('click', function(e) {
        if (e.currentTarget.style.backgroundColor === "red") {
          newColor(e);
        } else {
          originalColor(e);
        }
      });
    }

Answer 2

您忘记在newColor和originalColor上将参与活动作为参数接收。

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

function newColor(e) {
  e.currentTarget.style.background = "black";
}

function originalColor(e) {
  e.currentTarget.style.background = "red";
}

for (h = 0; h < $mainMenuButton.length; h +=1) {
  $mainMenuButton[h].addEventListener('click', function(e) {
    if (e.currentTarget.style.backgroundColor === "red") {
      newColor(e);
    } else {
      originalColor(e);
    }
  });
}

这应该有用。

Answer 3

您没有传递e（事件）参数

另请注意，Element.style.*会读取内联css样式，而不是CSS文件/标记中指定的样式。

您最初可以在red设置loop颜色，以便可以使用Element.style.*属性进行访问。

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton');

function newColor(e) {
  e.currentTarget.style.background = "black";
}

function originalColor(e) {
  e.currentTarget.style.background = "red";
}

for (h = 0; h < $mainMenuButton.length; h += 1) {
  $mainMenuButton[h].style.background = 'red';
  $mainMenuButton[h].addEventListener('click', function(e) {
    if (e.currentTarget.style.background == 'red') {
      newColor(e);
    } else {
      originalColor(e);
    }
  });
}

* {
  font-family: arial;
}

.desktopmenubutton {
  width: 150px;
  height: 100px;
  background-color: red;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white
}

.button2 {
  left: 300px;
}

<div class="desktopmenubutton button1">Button 1</div>
<div class="desktopmenubutton button2">Button 2</div>

单击事件时切换单个函数 - Javascript

3 个答案: