Question

我正在尝试切换相同div的背景颜色。它按预期更改一次（从蓝色变为红色）。但它无法切换回红色并继续在两种颜色之间切换。我知道我应该使用＆＃34; ==＆＃34;在第一个if语句中，但在使用＆＃34; ==＆＃34;甚至没有第一个切换工作。

有关如何让切换工作重复的任何建议吗？

＆＃13;

function toggleFunction() {
  var x = document.getElementById("box");
  
  if (x.style.background == "blue") {
    x.style.background = "red";
  } else {
    x.style.background = "blue";
 }
}

＆＃13;

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}

＆＃13;

<div id="box" class="box" onclick="toggleFunction()"></div>

＆＃13;

Answer 1

最简单的解决方案是创建一个名为red的新类，并使用classList.toggle切换它。这种方法的主要优点是，如果您使用类进行切换，则可以切换更多CSS属性，这也会为您扣除if-else比较。

＆＃13;

function toggleFunction() {
  var x = document.getElementById("box");
  x.classList.toggle("red");
}

＆＃13;

.box {
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}
.red{
 background-color: red;
}

＆＃13;

<div id="box" class="box" onclick="toggleFunction()"></div>

＆＃13;

Answer 2

$( ".box" ).each(function() {
  $( this).click(function() {
    $( this ).toggleClass( "red" );
  });
});

.box {
  background: blue;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}
.box.red {
background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="box" class="box"></div>

<div id="box" class="box"></div>

切换相同div的背景颜色

2 个答案: