Question

Fiddle

var orangeMode = true

flip = function() {
  orangeMode = !orangeMode;
}
document.getElementById("box").addEventListener("click", flip);

if (orangeMode) { 
  document.getElementById("circle").style.backgroundColor = "orange";
  } else {
    document.getElementById("circle").style.backgroundColor = "blue";
  }

在第一行手动将变量从true更改为false会将圆圈的颜色从橙色翻转为蓝色，但点击角落中的方框意味着在它们之间翻转，但不起作用。感觉有一些基本的我在这里做错了吗？

Answer 1

check the orange value in flip method itself

var orangeMode = true

flip = function() {
  orangeMode = !orangeMode;
  if (orangeMode) { 
  document.getElementById("circle").style.backgroundColor = "orange";
  } else {
    document.getElementById("circle").style.backgroundColor = "blue";
  }
}
document.getElementById("box").addEventListener("click", flip);

Answer 2

虽然移动代码以改变事件处理程序中的颜色是可行的，但我建议使用classList API。

Updated Fiddle

创建一个CSS类，将背景颜色设置为蓝色，并在单击该框时切换此类。

classList.toggle('className')将添加该类，如果它尚未添加到该元素上，否则它将删除该类。

document.getElementById("box").addEventListener("click", function() {
  document.getElementById('circle').classList.toggle('blue');
});

#box {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: red;
}
#circle {
  width: 50px;
  height: 50px;
  background: orange;
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}
#circle.blue {
  background: blue;
}

<div id="box"></div>

<div id="circle"></div>

Answer 3

你实际上可以检查颜色并摆脱全局变量：

var flip = function() {
  var baseColor = "orange";
  var currcolor = document.getElementById("circle").style.backgroundColor;
  document.getElementById("circle").style.backgroundColor = (currcolor == baseColor) ? "blue" : baseColor;
}
document.getElementById("box").addEventListener("click", flip);

点击其他东西时翻转某物的颜色

3 个答案: