Javascript 如何使用jQuery删除类？

如何使用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

试试这个：

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

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

---

也不要一次又一次地重新选择

$（“#nav”）

，使用方法链接，这会提高性能。

使用

removeClass

，不要将任何类传递给

removeClass

，它将删除元素拥有的所有类

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

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

---

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

既然这已经获得了足够多的选票，我将告诉你为什么这是一个比上述更好的答案。带有

removeClass（）

的一个

首先，您得到所需的元素，即

$（“#nav”）

然后，调用JQuery的一个属性，

removeClass（）

然后，再次调用JQuery的另一个属性，

addClass（）

在解决方案中，我建议：

首先，获取元素，然后调用propery

attr（）

，就这样

所以，这是少了一步。

这个怎么样

$('[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-",""));
}

---

它应该像预期的那样工作，对于meconcatenate it$（“#nav”）.removeClass（“橙色”）.addClass（“绿色”）；总之，为了保持一致性，为什么橙色是“颜色橙色”而绿色只是“绿色”？您不应该使用$（“.color green”）。单击（）绑定事件。它还可以绑定#nav上的事件，因为#nav将具有该类。尝试对颜色使用ID，例如#绿色等颜色选择器。这不是一种有效的方法，但您看到了dfsq解决方案。我知道

removeClass

，但dfsq是第一个回答的，我们只是在这里帮助大家不要像Adil那样重复对方的答案。对不起，警官，我的回答大约是5秒钟后。我对自己毁了的生活深表歉意。不，我只是在说阿迪尔，不是你：我不要做超级朋友。嗯，我喜欢你评论的风格。竖起大拇指。谢谢你dfsq，你太棒了！很好。

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