Question

以下代码会考虑不同的代码，如果单击代码，则会将背景变为红色。我想对它进行编码，以便如果再次点击它，它会从红色变回并“删除”背景，或者至少将其设置为空。我试过if语句无济于事。我知道我可以制作另一个将背景更改为白色的点击事件，但这是出于实验目的，我想知道是否可以使用if语句完成。谢谢你。

<script>
    $(document).ready(function() {
        $("p, h1").click(function() {
            $(this).css("background-color", "red");
            if ($(this).css("background-color", "red")) {
                $(this).css("background-color", "null");
            }
        });
    });
</script>

Answer 1

首先，您需要使用.css（）的getter版本，如

if($(this).css("background-color") == "red"){

但它仍然无法正常工作，因为css getter将返回一个rgb格式值，并将在浏览器中返回非一致值。

因此解决方案是使用toggleClass()

使用基于CSS的解决方案

.red {
    background-color: red;
}

然后

$(document).ready(function() {

   $("p, h1").click(function() {

      $(this).toggleClass("red");

   });

});

演示：Fiddle

Answer 2

$('p, h1').click(function() {

    var $this    = $(this);
    var altColor = $this.data('altColor');

    $this.css('background-color', altColor ? '' : 'red');

    $this.data('altColor', ! altColor);
});

这回答了你的问题，但你应该真正使用CSS类来实现这个。

Answer 3

这很容易使用CSS完成，而且更直接。如果您为点击创建一个CSS类，那么您可以在每次单击该项时打开/关闭它：

CSS

p, h1 {
    background-color: none;
}

p.red, p.h1 {
    background-color: red;
}

JavaScript的：

$('p, h1').click(function() {
    $(this).toggleClass('red');
});

jquery / javascript - 如何使用if语句“撤消”单击事件？

3 个答案: