单击时在类之间切换

Question

每次点击时如何添加和删除课程？

原始代码

HTML：

<div class="box"></div>

CSS：

.box{
  width: 100px;
  height: 100px; 
  background: blue;
}

我想补充一下：

.rounded {
  border-radius: 10px;
}

我知道我必须使用box div上的click功能，但我不知道如何添加一个类并删除它。

答案：

使用toggleClass

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

Answer 1

其他解决方案只是在类之间切换。如果要修改现有的并添加/删除值，请使用以下命令：

$('.box').css('border-radius','50px');

并删除：

$('.box').css('border-radius', '');

<强> Working example

Answer 2

Jquery可以删除一个类，但是不能改变类中的任何CSS ：

$(target).addClass("myClass");
$(target).removeClass("myClass andThisOne removeSoManyClasses");

以另一种方式覆盖一个类：

$("body").append("<style class='remove'>.box{/*many css*/}</style>");
$(".remove").remove();

Answer 3

是的可能。
要添加css类，语法为

$(selector).addClass(classname)

要删除css类，语法为

$(selector).removeClass(classname)

Working Fiddle

Answer 4

你不应该这样做。这种方法怎么样......

.box{
  width: 100px;
  height: 100px; 
  background: blue;
}

.box.rounded {
  border-radius: 10px;
}

然后只需使用toggleClass切换“舍入”类。

$('.box').toggleClass('rounded');