jQuery 如何添加和删除多个类

  • Post category:jquery

在jQuery中,我们可以很方便地使用addClass()removeClass()方法来添加和删除单个类。但是,当我们需要添加和删除多个类时,我们需要采用不同的方法。

添加多个类

使用addClass()

我们可以使用addClass()方法来添加多个类。我们只需将要添加的多个类名用空格隔开,然后传递给addClass()方法即可:

$(selector).addClass("class1 class2 class3");

使用attr()

我们还可以使用attr()方法将多个类名添加到元素的class属性中。但需要注意的是,在将多个类名添加到class属性之前,我们需要先获取元素当前的class属性值,然后再使用+操作符将多个类名与原有的class属性值拼接在一起,最后再将拼接后的class属性值设置回元素:

var currentClasses = $(selector).attr("class");
$(selector).attr("class", currentClasses + " class1 class2 class3");

删除多个类

使用removeClass()

我们可以使用removeClass()方法来删除多个类。我们只需将要删除的多个类名用空格隔开,然后传递给removeClass()方法即可:

$(selector).removeClass("class1 class2 class3");

使用attr()

我们还可以使用attr()方法将元素的class属性值中的多个类名删除。为了删除多个类名,我们需要先获取元素当前的class属性值,然后调用replace()方法来将要删除的多个类名替换为空字符串,最后再将修改后的class属性值重新设置回元素:

var currentClasses = $(selector).attr("class");
var classesToRemove = "class1 class2 class3";
var updatedClasses = currentClasses.replace(classesToRemove, "");
$(selector).attr("class", updatedClasses);

以上就是如何使用jQuery添加和删除多个类的攻略,其中添加多个类的方法有两种,分别是使用addClass()方法和attr()方法,而删除多个类的方法也有两种,分别是使用removeClass()方法和attr()方法。