📌  相关文章
📜  jQuery |带示例的 toggleClass()(1)

📅  最后修改于: 2023-12-03 14:43:16.150000             🧑  作者: Mango

jQuery | 带示例的 toggleClass()

简介

在 jQuery 中，toggleClass() 方法用于在元素中切换一个或多个类。该方法在类不存在时添加类，在类已经存在时移除类。

语法
$(selector).toggleClass(classname, addOrRemove);
  • $(selector)：要切换类的 jQuery 选择器。
  • classname：要切换的类名，可以是多个类名，用空格分隔。
  • addOrRemove：一个可选的布尔值参数，用于指定类是添加还是移除。为 true 时添加类，为 false 时移除类。默认为 true。
示例
示例 1：切换类

以下示例演示了如何使用 toggleClass() 方法切换类：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h2 class="title">Hello, World!</h2>
  <button id="toggleBtn">Toggle Highlight</button>

  <script>
    $(document).ready(function(){
        $("#toggleBtn").click(function(){
            $("h2").toggleClass("highlight");
        });
    });
  </script>
</body>
</html>

当点击 "Toggle Highlight" 按钮时，h2 元素的 "highlight" 类将被切换。

示例 2：添加或移除多个类

toggleClass() 方法也可以同时添加或移除多个类：

$(selector).toggleClass("class1 class2 class3");
示例 3：根据布尔值参数添加或移除类

可以使用布尔值参数来指示是否添加或移除类：

$(selector).toggleClass("highlight", false);

上述示例将移除元素中的 "highlight" 类。

总结

toggleClass() 方法是 jQuery 中用于在元素中切换类的便捷方法。无论是切换单个类还是多个类，都可以通过该方法轻松实现。希望这篇介绍对于使用 jQuery 中的 toggleClass() 方法的程序员们有所帮助。

注意：在示例中的代码块由于Markdown渲染问题可能无法正常显示为代码。