在jQuery中更改类名

Question

我知道我们可以做很多事情，比如改变元素的当前样式、改变其文本等。但是，我们如何使用jQuery更改类的名称呢？

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

.roundedCorners {
  /* code for roundedCorners */
}

.NotSoRoundedCorners {
  /* code for NotSoRoundedCorners */
}

按钮的样式如下：

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

我知道我们可以通过简单的jQuery代码片段直接更改它的样式，像这样：

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

但是，如果需要为一个元素更改多个样式，为什么不在CSS文件中只定义2个样式，并在需要更改样式时，将该元素的Class名称更改为另一种样式呢？

- anon271334

---

$.addClass和$.removeClass？我觉得这太简单了，不值得在S.O.上发帖。 - Genius

请使用.toggleClass()。在你的情况下，写成 $('.closer').toggleClass('roundedCorners NotSoRoundedCornders');。 - jAndy

@jAndy：那实际上是最好的答案 ;) - Felix Kling

@J.T.S. 是的，更改类名是最好的方法。你有什么问题？ - Felix Kling

@Felix Kling - 谢谢，是的，问题就在于我甚至不确定您是否可以更改类名。 - anon271334

Answer 1

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

使用它，你可以明确地从节点中删除和添加一个类，而不影响其他类。

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

---

这里有很多人建议使用 .attr()，但这会替换整个 className 属性，因此会覆盖或删除任何给定的css类。我认为这不是正确的方法。

- jAndy

---

有特殊的方法来处理类，所以它们是最好的选择。 - Felix Kling

你做得很棒，伙计！我的+1是最佳答案。 - Harish

不知道那个方法，绝对是最好的方法。 - Decko

Answer 2

是的。可以使用attr方法来实现。

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

- Decko

---

你正在覆盖所有可能设置的类。 - jAndy

jAndy 是正确的。这将清除 'class' 属性中的所有内容，最终只剩下 'RoundedCorners'。 - Yngve B-Nilsen

Answer 3

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

- Vicky

---

.toggleClass() 就在这里等着你了。 - jAndy

Answer 4

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

- Harish

---

您正在覆盖所有可能设置的类。 - jAndy

根据J.T.S的说法，“我们需要改变样式，只需将元素的类名更改为另一种样式即可？” - Harish

Answer 5

你可以使用：

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

或者

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

- Yngve B-Nilsen

---

这里不需要多次调用 .toggleClass。 - jAndy

@jAndy，我注意到你在你的回答中写了那个。感觉事后更新我的回答会有点“抄袭”：）但你当然是对的。 - Yngve B-Nilsen

Answer 6

真的吗，为什么不呢？

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

- Snowbear

Answer 7

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

- Vivek