当前位置：极客教程 > jQuery > jQuery 问答 > jQuery判断当点击元素levelnormal_item时，添加类名，再次点击移除类名

jQuery判断当点击元素levelnormal_item时，添加类名，再次点击移除类名

jQuery判断当点击元素`levelnormal_item`时，添加类名，再次点击移除类名

如何使用jQuery？

要使用jQuery，我们首先需要在HTML页面中引入jQuery库。可以通过以下方式引入：

<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库。通过点击这些元素，可以触发点击事件处理函数，从而添加/移除类名。