jquery如何来控制两个类

Hey小伙伴们，今天要来聊聊一个超实用的小技巧——如何用jQuery来控制两个类，是不是听起来就很有趣呢？别急，跟着我一步步来，保证你也能轻松这个技能！

让我们来设想一下场景，假设你有一个网页，上面有很多元素，你想要通过点击一个按钮来切换两个不同的样式，这在很多动态网页设计中都是一个常见的需求，比如切换图片的显示效果，或者改变布局的样式等等。

基础概念

在开始之前，我们得先了解一些基础概念，jQuery是一个快速、小巧、功能丰富的JavaScript库，它让HTML文档遍历和操作、事件处理、动画和Ajax等操作变得更加简单，而类（class）则是HTML元素的一个属性，用于定义一组样式规则，这样可以在多个元素上应用相同的样式。

准备工作

在开始编写代码之前，我们需要确保网页中已经引入了jQuery库，如果你还没有引入，可以在<head>标签中添加以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

我们还需要一些HTML元素和CSS样式，这里是一个简单的例子：

<button id="toggleButton">切换样式</button>
<div id="content" class="style1">这里是内容</div>

.style1 {
  background-color: blue;
  color: white;
}
.style2 {
  background-color: green;
  color: black;
}

jQuery控制类

我们来编写jQuery代码来控制这两个类，我们将给按钮添加一个点击事件，当点击时，它会检查内容区域的当前类，并切换到另一个类。

$(document).ready(function(){
  $("#toggleButton").click(function(){
    var currentClass = $("#content").attr("class");
    var newClass = currentClass === "style1" ? "style2" : "style1";
    $("#content").removeClass(currentClass).addClass(newClass);
  });
});

这段代码做了什么？我们等待文档加载完成（$(document).ready），我们给按钮（#toggleButton）添加了一个点击事件，当按钮被点击时，我们检查#content元素的当前类，如果它是style1，我们就切换到style2，反之亦然，我们使用removeClass来移除当前类，然后使用addClass来添加新的类。

进阶技巧

如果你想要同时控制多个类，或者有更多的元素需要切换样式，你可以使用更复杂的逻辑或者循环，你可以为每个元素添加一个特定的数据属性，来标识它们应该切换到哪个类。

<button id="toggleButton" data-target-class="style2">切换样式</button>
<div id="content" class="style1" data-target-class="style2">这里是内容</div>

$(document).ready(function(){
  $("#toggleButton").click(function(){
    var targetClass = $(this).data("target-class");
    $("#content").removeClass().addClass(targetClass);
  });
});

在这个例子中，我们使用data-target-class属性来存储目标类名，然后在点击事件中读取这个属性，并应用到#content元素上。