博客

如何在jQuery中添加和删除多个类

  • Post category:jquery

在jQuery中，我们可以使用addClass()方法添加一个或多个类，使用removeClass()方法删除一个或多个类，也可以使用toggleClass()方法来切换一个或多个类。下面是详细的攻略：

添加多个类

我们可以使用addClass()方法来添加一个或多个类到所选元素上。该方法的语法如下：

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

其中，selector为要添加类的元素的选择器，class1, class2, …表示要添加的类名，多个类名之间用空格分隔。

例如，如果我们有一个html元素：

<div id="myDiv" class="box"></div>

我们可以使用jQuery代码为该元素添加多个类：

$("#myDiv").addClass("redFont bold");

这将添加“redFont”和“bold”两个类到元素上，该元素的class属性将变为“box redFont bold”。

删除多个类

可以使用removeClass()方法来从所选元素中删除一个或多个类。该方法的语法如下：

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

其中，selector为要删除类的元素的选择器，class1,class2,…表示要删除的类名，多个类名之间用空格分隔。

例如，如果我们有一个html元素：

<div id="myDiv" class="box redFont bold"></div>

我们可以使用jQuery代码从该元素中删除多个类：

$("#myDiv").removeClass("redFont bold");

这将从元素中删除“redFont”和“bold”类，该元素的class属性将变为“box”。

示例1：添加和删除多个类

以下是一个完整的示例，这个示例为html元素添加/删除多个类，点击添加/删除按钮可以切换类：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加、删除多个类示例</title>
    <style>
        .redFont {color: red;}
        .bold {font-weight: bold;}
        .italic {font-style: italic;}
    </style>
</head>
<body>
    <div id="myDiv" class="box"></div>
    <button id="addBtn">添加类</button>
    <button id="removeBtn">删除类</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#addBtn").click(function(){
                $("#myDiv").addClass("redFont bold italic");
            });

            $("#removeBtn").click(function(){
                $("#myDiv").removeClass("redFont bold italic");
            });
        });
    </script>
</body>
</html>

该示例中，当我们点击添加按钮时，jQuery将为位于id=”myDiv”的元素添加redFont、bold、italic三个类，当我们点击删除按钮时，jQuery将从该元素中删除这三个类。

示例2：使用toggleClass()方法

使用toggleClass()方法可以以更简单的方式切换类名，它会自动根据元素是否含有该类名来添加或删除该类名。该方法的语法如下：

$(selector).toggleClass(className);

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>toggleClass()方法示例</title>
    <style>
        .redFont {color: red;}
        .bold {font-weight: bold;}
        .italic {font-style: italic;}
    </style>
</head>
<body>
    <div id="myDiv" class="box"></div>
    <button>添加/删除类</button>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#myDiv").toggleClass("redFont bold italic");
            });
        });
    </script>
</body>
</html>

该示例中，当我们点击按钮时，jQuery会自动检查元素中是否含有redFont、bold、italic这三个类名，如果没有，则添加这三个类名；如果有，则删除这三个类名，从而实现了切换类的效果。

Tags: