1

如何使用 jQuery 删除类？

我有这个正在处理的“模板”，我想要一个左侧的“设置”框，用户可以在其中更改导航的“配色方案”。

我有 5-10 种颜色，但我无法让它工作。

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

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

好吧我用这个..

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

但这只会带走橙色。如果您单击另一种颜色，将无法正常工作。对不起我的英语，是的。这是我第一次来这里:)

亲切的问候/阿尔宾

4

5 回答 5

7

尝试这个：

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

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

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

于 2013-02-05T10:47:36.373 回答
6

下面的代码将简单地将现有类覆盖为您设置的任何内容（在本例中为“绿色”）。

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

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

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

然后，调用 JQuery 的一个属性，removeClass().

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

在我建议的解决方案中：

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

所以，它小了一步。

于 2013-02-05T10:49:21.640 回答
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-",""));
}
于 2013-02-05T10:51:42.410 回答
2

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

$(".color-green").click(function () {
  $("#nav").removeClass().addClass("green");
});
于 2013-02-05T10:48:47.777 回答
1 
$(".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");
});
于 2013-02-05T10:48:35.600 回答