切换使用删除和添加类

Question

$('#x').click(function(){ 
 
    $('#x').removeClass('linex').addClass('line'); 
 
})

.line { 
 
color: red; 
 
} 
 

 
.linex { 
 
color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='x' class='max linex'>line</div>

在这里我的代码，我把全班学生分成line(red)当我在DIV上单击，但我想它是可逆的，所以当我再次同时点击它在line再次变成linex(blue)

Answer 1

改变你的JS到这一点：

$('#x').click(function(){ 
    $('#x').toggleClass('line linex'); 
}); 

Answer 2

使用toggleClass

$('#x').click(function(){ 
 
    $('#x').toggleClass('linex').toggleClass('line'); 
 
})

.line { 
 
color: red; 
 
} 
 

 
.linex { 
 
color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='x' class='max linex'>line</div>

Answer 3

您可以在您的功能上使用toggleClass("line")。 不需要切换两个类只是类行是足够的，因为你的div在第一个班级线和功能覆盖它。

$('#x').click(function(){ 
    $('#x').toggleClass('line'); 
}); 

Answer 4

你可以把它比较容易。我建议的解决方案将添加默认的颜色样式：红色的div。这意味着你的div的文字颜色会变成红色。当你点击div时，你所要做的只是切换linex类。这将添加类如果不存在或删除类如果存在，并将使您的代码更短，更好。谢谢

Answer 5

没有必要在dom中再次寻找该id ...它已在事件处理程序中作为this可用。

使用空间toggleClass()

$('#x').click(function(){ 
 
    $(this).toggleClass('linex line'); 
 
});

.line { 
 
color: red; 
 
} 
 

 
.linex { 
 
color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='x' class='max linex'>line</div>

分离班