Question

我想使用Jquery在按钮单击时更改div的backColor。目前我正在改变我的课程。

这是我的Css：

.GreenColor
{

background-color:#00FF00;
}

.RedColor
{

background-color:#FF0000;
}

这是我的php文件中的脚本：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<script>


$(document).ready(function(){


$("button").click(function() {
  $(this).closest("div").toggleClass("RedColor").toggleClass("GreenColor");
});
});
</script>

但不知怎的，它什么也没做。

可以在这里使用一些帮助;）

Answer 1

可以尝试

$("#button").click(function() {
   $(this).closest("div").toggleClass("RedColor GreenColor");
});

甚至尝试

$("#button").toggle(function() {
    $(this).closest("div").removeClass("RedColor").addClass("GreenColor");
}, function() {
    $(this).closest("div").removeClass("GreenColor").addClass("RedColor");
});

Answer 2

使用 .toggleClass（） 使用第二个参数进行确定是否应该添加或删除该类。如果这个参数是 value为true，然后添加类;如果不对，那班级就是除去。本质上，声明：

$("button").click(function() {
      $(this).closest("div").toggleClass("RedColor GreenColor");
    });

Answer 3

Jquery Documentations说

您应该使用$(':button')选择器，因为：

：button是一个jQuery扩展，不是CSS规范的一部分，查询使用：按钮无法利用性能提升由本机DOM querySelectorAll（）方法提供。实现了使用时的最佳性能：按钮选择元素，首先选择使用纯CSS选择器的元素，然后使用.filter（“：button”）。

见小提琴：

http://jsfiddle.net/ravi441988/kE3W8/

按钮单击更改背景div

3 个答案: