解决jquery class属性有多个的问题
问题描述
在使用jQuery操作DOM元素时，经常会遇到一个问题：一个元素的class属性有多个值，我们需要根据其中的一个值来进行操作，但是jQuery提供的hasClass方法只能判断元素是否包含某个class，而不能获取到具体的class值。
解决方案
解决这个问题的方案有多种，下面将介绍两种常用的方法：使用attr方法和使用正则表达式。
方法一：使用attr方法
jQuery提供了attr方法可以获取元素的属性值，我们可以利用这个方法来获取元素的class属性值。
var element = $('.example'); // 获取元素
var classes = $(element).attr('class'); // 获取class属性值
上面的代码首先通过jQuery选择器获取到了一个具体的元素，然后通过attr方法获取了它的class属性值。这个值是一个字符串，包含了所有的class值，多个class值之间用空格分隔。
接下来，我们可以通过字符串的处理方法，将这个字符串转换成一个数组，然后就可以对这个数组进行操作了。
var classArray = classes.split(' '); // 将class字符串转换成数组
// 对数组进行操作...
上面的代码使用split方法将class属性值字符串按照空格分隔成一个数组，然后可以对这个数组进行操作。你可以使用数组的方法来获取数组中的某个元素，或者遍历整个数组进行操作。
方法二：使用正则表达式
如果你熟悉正则表达式的使用，那么使用正则表达式来解决这个问题也是一种不错的选择。
var element = $('.example'); // 获取元素
var classes = $(element).attr('class'); // 获取class属性值
var classArray = classes.match(/\b\w+\b/g); // 使用正则表达式匹配单词
// 对数组进行操作...
上面的代码使用了正则表达式来匹配class属性值中的单词，然后将匹配到的结果存储到一个数组中。你可以根据自己的需求来调整正则表达式的匹配规则。
示例代码
下面是一个完整的示例代码，演示了如何使用attr方法和正则表达式来获取元素的class属性值，并对其进行操作。
<!DOCTYPE html>
<html>
<head>
<script src="
<style>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<p class="red bold">Hello World</p>
<script>
$(document).ready(function() {
var element = $('p'); // 获取元素
var classes = $(element).attr('class'); // 获取class属性值
var classArray = classes.split(' '); // 使用split方法将字符串转换成数组
// 输出数组中的每个元素
for (var i = 0; i < classArray.length; i++) {
console.log(classArray[i]);
}
});
</script>
</body>
</html>
上面的代码首先定义了一个包含两个class的<p>元素，然后通过jQuery的选择器获取到这个元素，使用attr方法获取class属性值，并使用split方法将其转换成一个数组。最后，通过遍历数组的方式将数组中的每个元素输出到控制台。
你可以在浏览器的开发者工具中打开控制台，运行上面的代码，就可以看到数组中的每个元素。
类图
下面是一个使用mermaid语法绘制的类图，展示了使用attr方法和正则表达式的相关类和方法。
classDiagram
class jQuery {
+attr(name: string): string
}
class Element {
+hasClass(className: string): boolean
}
class Array {
+split(separator: string): string[]
}
jQuery --> Element: contains
Element --> Array: contains
上面的类图展示了jQuery类、Element类和Array类之间的关系，通过attr方法、hasClass方法和split方法实现了对具有多个class属性的元素进行操作
