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

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; }

目前设置 fiddle 的方式主要是我想要的。用户单击颜色，它会在黑色、红色、绿色、蓝色之间循环，然后再次变回黑色。然而，有一个转折点!

假设黑色为默认值/空值，颜色(红色、绿色和蓝色)为不同的选项。如果用户单击某个值时它已经是一种颜色，它将重置为黑色。如果用户点击它时它是黑色的，那么它会循环显示颜色。

问题在这里……

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

最后，如果您单击一个黑色方 block 将其变为红色，然后单击另一个方 block ，然后返回到前一个方 block ，它会将其变为黑色(不是循环)，因为您点击的是离开前一个方 block 的事实，它摆脱了计时器。

我知道很多 - 但我觉得用这个简单的概念不应该 t̲o̲o̲ h̲a̲r̲d̲ 弄清楚，但出于某种原因我只是我无法全神贯注。这可能非常简单。

帮助我 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，因此我们使用 .data() 将该 ID 存储在点击的元素上> 并在每次点击时重置它以重新启动计时器。