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");
});

我如何用jQuery删除类？

5 个答案: