切換使用刪除和添加類

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>

分離班