在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()
方法。