Question

我已经设置了jsFiddle here。但下面是代码......

HTML

<div class="square square0"></div>
<div class="square square1"></div>
<div class="square square2"></div>
<div class="square square3"></div>

的Javascript

$('.square').click(function () {
    if ($(this).hasClass('square0')) {
        $(this).removeClass('square0').addClass('square1');
        return false;
    }
    if ($(this).hasClass('square1')) {
        $(this).removeClass('square1').addClass('square2');
        return false;
    }
    if ($(this).hasClass('square2')) {
        $(this).removeClass('square2').addClass('square3');
        return false;
    }
    if ($(this).hasClass('square3')) {
        $(this).removeClass('square3').addClass('square0');
        return false;
    }
});

CSS

.square { display: block; height: 100px; width: 100px; }
.square0{ background-color: #000; }
.square1{ background-color: #F00; }
.square2{ background-color: #0F0; }
.square3{ background-color: #00F; }

目前设置小提琴的方式主要是我想要的。用户点击颜色，它再次循环通过黑色，红色，绿色，蓝色和再回到黑色。但是，有一个扭曲！

想象一下黑色是默认/空值，而颜色（红色，绿色和蓝色）是不同的选项。如果某个值在用户点击时已经是一种颜色，它将重置为黑色。如果用户点击它时它是黑色的，那么它会循环显示颜色。

这是擦......

从点击黑色的那一刻起（并将其变为红色），计时器开始2秒钟。如果用户没有在2秒内点击，那么下次他们点击它时，它会变黑（默认/空值）。但每次他们继续点击以循环显示颜色（包括返回黑色）时，该计时器将再次重置为2秒。

最后，如果您单击一个黑色块将其变为红色，然后再单击另一个块，然后再返回到前一个块，则会将其变为黑色（而不是循环），因为您点击了之前的块，它摆脱了计时器。

我知道这很多 - 但我觉得这个简单的概念的东西不应该太难以理解，但出于某种原因我只是无法绕过它。这可能很简单。

帮助我Obi Wan Stackoverflow（我？）......你是我唯一的希望！

Answer 1

你需要做这样的事情：

$('.square').click(function(e) {
    var $this = $(this);
    if ($this.hasClass('timer-on') || $this.hasClass('square0')) {
        if ($this.hasClass('square0')) {
            $this.removeClass('square0').addClass('square1');
        } else if ($this.hasClass('square1')) {
            $this.removeClass('square1').addClass('square2');
        } else if ($this.hasClass('square2')) {
            $this.removeClass('square2').addClass('square3');
        } else if ($this.hasClass('square3')) {
            $this.removeClass('square3').addClass('square1');
        };
    } else {
        $this.addClass('square0').removeClass('square1 square2 square3');
    };

    clearTimeout($this.data('timer'));
    $this.addClass('timer-on').data('timer', setTimeout(function () {
        $this.removeClass('timer-on');
    }, 2000));
});

http://jsfiddle.net/mblase75/bF5Re/

您的return false语句完全没有必要，并且干扰了后面的代码，因此我将其删除，并将后续的if语句更改为else if。

我使用的技巧是在两秒计时器启动时添加一个类timer-on，并在计时器结束后将其删除。现在我们只需要测试timer-on是否存在就知道计时器是否用完了。

setTimeout函数返回一个可以使用clearTimeout清除的ID，因此我们将该ID存储在使用.data()单击的元素上，并在每次单击时重置该ID以重新启动计时器。

更改特定于单击元素的超时内的类

1 个答案: