我如何用jQuery删除类？

Question

我如何用jQuery删除类？

我有这个“模板”，我正在努力，我想在左边的“设置”框，用户可以更改导航的“颜色方案”。

我有5-10种颜色，我不能让它工作。

$(".color-orange").click(function () {
  $("#nav").addClass("color-orange");
});

如果有人点击绿色，我怎么能删除“color-orange”类并添加一个新类？

好吧，我用过这个..

$(".color-green").click(function () {
      $("#nav").removeClass("color-orange");
      $("#nav").addClass("green");
    });

但这只是把橙色带走了。 如果你点击另一种颜色将无法工作..对不起我的英语，是的。 这是我第一次来这里:)

亲切的问候/ Albin

Answer 1

尝试这个：

$("#nav").removeClass().addClass("green");

如果没有参数， removeClass将删除所有类。

也不要一次又一次地重新选择$("#nav") ，使用方法链接，这样可以提高性能。

Answer 2

下面的代码将简单地将现有类重写为您设置的任何类（在本例中为“green”）。

$("#nav").attr("class", "green");

由于这已经获得了足够的支持，我会告诉你为什么这比上面的答案更好。 带有removeClass()那个。

首先，您获得所需的元素，即$("#nav") 。

然后，您调用JQuery的属性removeClass() 。

然后，再次调用JQuery的另一个属性addClass() 。

在解决方案中，我建议：

首先，你获得元素，然后调用attr() ，就是这样。

所以，它只是一步之遥。

Answer 3

这个怎么样

$('[class^="color-"]').each(function() {
  $("#nav").removeClass().addClass($(this).attr("class"));
}

或者xFortyFourx指出：

$('[class^="color-"]').each(function() {
  $("#nav").attr("class",$(this).attr("class"));
}

---

替代方案 - 如果我认为你有

.green { color:green; .... } /* for the nav */
.color-green { color:green; .... } /* for the settings */

你可以做

$('[class^="color-"]').each(function() {
  $("#nav").attr("class",$(this).attr("class").replace("color-",""));
}

Answer 4

使用removeClass并且不要将任何类传递给removeClass ，它将删除元素具有的所有类。

$(".color-green").click(function () {
  $("#nav").removeClass().addClass("green");
});

Answer 5

$(".color-green").click(function () {
      $("#nav").removeClass("color-orange");
      $("#nav").removeClass("next-color");
      $("#nav").removeClass("another-color");
      $("#nav").removeClass("yet-another-color-but-green");
      $("#nav").addClass("green");
});