极客教程jQuery判断当点击元素levelnormal_item时，添加类名，再次点击移除类名
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
在引入jQuery库之后，我们就可以使用jQuery的语法和功能了。
判断点击元素并添加/移除类名
我们的目标是在点击元素levelnormal_item时，添加一个类名，再次点击时移除该类名。下面是实现这一功能的示例代码：
$(document).ready(function(){
$(".levelnormal_item").click(function(){
$(this).toggleClass("active");
});
});
上述代码中，$(document).ready() 函数用于确保在页面完全加载后再执行代码。$(".levelnormal_item") 选择器选择所有类名为 levelnormal_item 的元素。.click() 方法指定当这些元素被点击时触发的事件处理函数。
在事件处理函数中，$(this) 表示当前被点击的元素。.toggleClass("active") 方法用于切换元素的类名。如果元素已经有类名 active，则移除该类名；如果元素没有该类名，则添加该类名。
通过以上代码，我们可以实现当点击 levelnormal_item 元素时，添加类名 active，再次点击则移除该类名。
示例代码运行结果
让我们通过一个简单的示例来演示上述代码的运行结果。
以下是一个HTML页面的代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery示例</title>
<style>
.levelnormal_item {
padding: 10px;
background-color: #f2f2f2;
cursor: pointer;
}
.active {
background-color: #ff0000;
color: #ffffff;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(document).ready(function(){(".levelnormal_item").click(function(){
$(this).toggleClass("active");
});
});
</script>
</head>
<body>
<div class="levelnormal_item">元素1</div>
<div class="levelnormal_item">元素2</div>
<div class="levelnormal_item">元素3</div>
</body>
</html>
在上述代码中，我们定义了一个类名为 levelnormal_item 的div元素，并引入了jQuery库。通过点击这些元素，可以触发点击事件处理函数，从而添加/移除类名。
结论
jQuery是一款强大且易于使用的JavaScript库，可以简化各种开发任务。通过使用jQuery的选择器和事件处理功能，我们可以方便地判断当点击元素时执行相应的操作，例如添加/移除类名。