在 jQuery 中更改类名答案

【问题标题】：Changing ClassName in jQuery在 jQuery 中更改类名
【发布时间】：2011-03-28 06:35:35
【问题描述】：

我知道我们可以做很多事情，比如改变元素的当前样式，或者改变它的文本等。但是，我们如何使用 jQuery 来改变类的 name 呢？

例如，下面的 CSS 文件有两种不同的样式：

.roundedCorners {
  /* code for roundedCorners */
}

.NotSoRoundedCorners {
  /* code for NotSoRoundedCorners */
}

按钮看起来像：

<input type="submit" class="NotSoRoundedCorners" value="Turn me on!" />

我知道我们可以像这样用一个简单的 jQuery snip 直接改变它的样式：

$('.closer').css({'visibility': 'hidden'}, 1000); // ETC.

但是，如果要为一个元素更改多种样式怎么办。为什么CSS文件中不只定义2个样式，当我们需要更改样式时，只需将元素的Class名称更改为其他样式？

【问题讨论】：

$.addClass 和 $.removeClass ？我认为将其发布到 S.O. 太容易了
使用.toggleClass()。在你的情况下$('.closer').toggleClass('roundedCorners NotSoRoundedCornders');
@jAndy：这实际上是最好的答案；）
@J.T.S.是的，更改类名是最好的方法。你有什么问题？
@Felix Kling - 谢谢，是的，问题是我什至不确定你是否可以更改类名。

【解决方案1】：

你应该调用 jQuery 的 .toggleClass()^help 方法。

使用它，您可以显式地删除和添加一个类到节点，而其他类保持不变。

$('.closer').toggleClass('roundedCorners NotSoRoundedCornders');

这里的许多人建议使用.attr()，但这会替换整个className 属性，因此会覆盖/删除任何给定的css 类。我不认为这是要走的路。

【讨论】：

【解决方案2】：

是的。通过使用 attr 方法。

$('.NotSoRoundedCorners').attr('class', 'RoundedCorners');

【讨论】：

【解决方案3】：

$('#yourid').removeClass("NotSoRoundedCorners").addClass("roundedCorners");

【讨论】：

【解决方案4】：

$('.NotSoRoundedCorners').attr('class', 'RoundedCorners');

【讨论】：

你覆盖了所有可能设置的类。
引用自 J.T.S we need to change the style, just change the Class name of the element to the other style?

【解决方案5】：

你可以使用：

$('.closer').toggleClass('roundedCorners').toggleClass('NotSoRoundedCorners')

或

$('.closer').removeClass('roundedCorners');
$('.closer').addClass('NotSoRoundedCorners')

【讨论】：

【解决方案6】：

真的，为什么不呢？

$('.closer').addClass("roundedCorners);
$('.closer').removeClass("NotSoRoundedCorners );

【讨论】：

【解决方案7】：

$('.closer').removeClass('roundedCorners');
$('.closer').addClass('NotSoRoundedCorners')

【讨论】：