Промяна на класа в рамките на времето за изчакване, специфично за кликнатия елемент

Настроих 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̲ за разгадаване, но по някаква причина просто не мога обгръщам ума си около него. Вероятно е глупаво просто.

Помогни ми Оби Уан Stackoverflow(i?)... ти си единствената ми надежда!


javascript jquery settimeout addclass
person Scott J Freeman    schedule 24.04.2013    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Ще трябва да направите нещо подобно:

$('.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, така че съхраняваме този идентификационен номер в елемента, върху който е щракнато с .data(), и го нулираме при всяко щракване, за да рестартираме таймера.

person Blazemonger    schedule 24.04.2013