CODEWITHSUNDEEP
javascriptjquerysettimeoutaddclass
Scott J Freeman
Scott J Freeman

Reputation: 57

Change class within timeout specific to clicked element

I've set up a jsFiddle here. But below is the code...

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

The way the fiddle is set up currently is mostly what I want. The user clicks the colors and it cycles through black, red, green, blue and back to black again. However, there's a twist!

Imagine black as the default / empty value, and the colors (red, green, and blue) being the different options. If a value is already a color when the user clicks it, it will reset back to black. If it is black when the user clicks it, then it cycles through the colors.

Here's the rub...

From the moment they click black, (and it turns it to red) a timer for 2 seconds starts. If the user does not click in 2 seconds, then the next time they click it, it turns black (default / empty value). But every time they continue to click to cycle through the colors (including back to black), that timer resets to 2 seconds once again.

Lastly, if you click a black block to turn it red, and then another block, and then back to the previous one, it will turn it black (not cycle) for the very fact that you clicked away from that previous block, which gets rid of the timer.

I know it's a lot - but I feel like something with this simple of a concept shouldn't be t̲o̲o̲ h̲a̲r̲d̲ to figure out, but for some reason I just can't wrap my mind around it. It's probably stupid simple.

Help me Obi Wan Stackoverflow(i?)... you're my only hope!

Upvotes: 2

Views: 271

Answers (1)

Blazemonger
Blazemonger

Reputation: 92903

You'll need to do something like this:

$('.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/

Your return false statements were totally unnecessary, and were interfering with the code that followed, so I removed them and changed your subsequent if statements to else if instead.

The trick I used is to add a class, timer-on, when the two-second timer starts and remove it once the timer ends. Now we just need to test for the presence of the timer-on to know if the timer has run out.

The setTimeout function returns an ID which can be cleared using clearTimeout, so we store that ID on the element clicked using .data() and reset it on every click to restart the timer.

Upvotes: 1

Related Questions