切换使用删除和添加类

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>

在我的代码中，当我点击div时，我将类转换为line(red)，但是我希望它是可逆的，所以当我在line中时再次点击它再次进入linex(blue)

Answer 1

使用toggleClass

＆＃13;

＆＃13;

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

＆＃13;

.line {
color: red;
}

.linex {
color: blue;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将你的js更改为：

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

Answer 3

您可以在功能上使用toggleClass("line")。 没有必要切换两个类只是类行是足够的，因为你的div在第一个有类行和函数覆盖它。

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

Answer 4

你可以让它变得更容易一些。我建议的解决方案是添加默认的颜色样式：红色到div。这意味着你的div的文字颜色将是红色。单击div时，您只需切换linex类。这将添加该类（如果不存在）或删除该类（如果存在）并将使您的代码更短更好。感谢

Answer 5

无需在dom中再次查找该ID ...它已在事件处理程序中以this的形式提供。

在toggleClass()

中使用空格分隔的类

＆＃13;

＆＃13;

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

＆＃13;

.line {
color: red;
}

.linex {
color: blue;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;