Question

我有一个默认为绿色的框，然后在第一次点击时将颜色更改为红色。当你再次点击它时，如何让盒子变回绿色？

<div class="box1" id="1"> </div>

.box1 {
top: 1%;
left: 1%;
right: 1%;
height: 6%;
position: absolute;
background-color: #68E000;
padding-left: 2%;
padding-top: 0%;
cursor: pointer;
}

$(document).ready(function() {
    $("#1").click(function() {
        $("#1").css("background-color", "#FA0000");
    });
});

提前谢谢

Answer 1

最简单的事情，跨浏览器，是使用另一个类：

.box1.toggled {
    background-color: #FA0000;
}

然后切换它：

$("#1").click(function() {
    $(this).toggleClass("toggled");
});

另请注意，您可以在点击处理程序中使用$(this)，而不是再次查找该元素。

直播示例：

$(document).ready(function() {
  $("#1").click(function() {
    $(this).toggleClass("toggled");
  });
});

.box1 {
  top: 1%;
  left: 1%;
  right: 1%;
  height: 6%;
  position: absolute;
  background-color: #68E000;
  padding-left: 2%;
  padding-top: 0%;
  cursor: pointer;
}
.box1.toggled {
  background-color: #FA0000;
}

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

在评论中，您说过要避免使用其他课程。我不明白你为什么要这样做，但我们可以用旗帜来代替它：

$("#1").click(function() {
  var $this = $(this);
  var isRed = !$this.data("isRed");
  $this.data("isRed", isRed);
  $(this).css("background-color", isRed ? "#FA0000" : "");
});

注意如何很好地建立这个比例，我们将标志存储在元素上，而不是存储在它自己的变量中。

直播示例：

$(document).ready(function() {
  $("#1").click(function() {
    var $this = $(this);
    var isRed = !$this.data("isRed");
    $this.data("isRed", isRed);
    $(this).css("background-color", isRed ? "#FA0000" : "");
  });
});

.box1 {
  top: 1%;
  left: 1%;
  right: 1%;
  height: 6%;
  position: absolute;
  background-color: #68E000;
  padding-left: 2%;
  padding-top: 0%;
  cursor: pointer;
}

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

但请注意，这会将样式与代码混合在一起，而且比将样式和代码分开并使用类更复杂。

旁注：虽然$("#1")有效但在技术上无效。 CSS id选择器不能以数字开头。恰好$("#1")有效，因为jQuery将其优化为对getElementById的调用。但是如果你把它与任何东西结合起来（例如$("#1 span")来选择span元素中的#1元素），它就会失败。

出于这个原因，我避免以数字开头的id值。如果您执行使用它们，您可以通过转义（难以阅读）或属性选择器$('[id="1"]')使用有效选择器选择它们。但是jQuery无法优化它来调用getElementById（虽然优化通常不重要）。

如何在第二次点击时删除样式？

1 个答案: