2

我在这里设置了一个 jsFiddle。但下面是代码...

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 秒。

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

我知道这很多- 但我觉得这个简单概念的东西不应该是 t̲o̲o̲ h̲a̲r̲d̲ 来弄清楚，但由于某种原因，我无法将我的想法包裹起来。这可能是愚蠢的简单。

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

4

1 回答 1

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

于 2013-04-24T21:03:44.393 回答