javascript - 根据类对 <div> 执行操作

标签 javascript jquery html css

我想在点击时切换元素的类,但看起来 jQuery 只看到元素开始时的类,而不是读取变化。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".red").click(function(){
        $(this).addClass("green");
        $(this).removeClass("red");
    });

    $(".green").click(function(){
        $(this).addClass("red");
        $(this).removeClass("green");
    });
});
</script>
<style>
.green {
    color: green;
}
.red {
    color: red;
}
</style>
</head>
<body>

<p class="green">I should toggle red/green</p>

</body>
</html>

如何在每次单击元素时正确切换元素的类?

最佳答案

你需要使用toggleClass()

$(document).ready(function(){
    $(".red, .green").on('click',function(){
        $(this).toggleClass("green red");
    });
});

关于javascript - 根据类对 <div> 执行操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34319640/

相关文章:

javascript - 来自模板 ng-repeat 的 AngularJS 子 $http.post

javascript - Rails 如何制作过滤链接

javascript - 点击切换元素时文本会发生变化

javascript - 如何设置 bootstrap typeahead.js 自动完成的类名

html - 到父文件夹的相对链接不起作用

javascript - (Koa.js) 生成器和产量基础知识

javascript - Uncaught ReferenceError : require is not defined Webpack + AngularJS

javascript - 如何使用jquery在表单文本字段中只允许阿拉伯字符

html - CSS:如何使用 flexbox 控制不同大小图像库中的最大增长比率

javascript - 单击 "Buy Now"按钮时,ajax post 应将数据发送到路由 "/buy"