Question

我想在点击时切换元素的类，但看起来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>

如何在每次点击元素时正确切换元素的类？

Answer 1

您需要使用toggleClass()

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

Answer 2

您需要使用.on，因为您正在动态修改类。

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

    $(document).on("click", ".green", function(){
        $(this).addClass("red");
        $(this).removeClass("green");
    });
});

Answer 3

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document.body).ready(function(){
    $(document.body).on('click',"button",function(){$(this).toggleClass("red green");})
});
</script>
<style>
.red {
    font-size: 120%;
    background: red;
}
.green{
background:green;
}
</style>
</head>
<body>
<button class = "green">Toggle class "green" for p elements</button>

</body>
</html>

根据班级

3 个答案: