jQuery - Button CSS Class Reset after 2 Clicks

Question

On button first click, it should apply .btn-1 class, second click .btn-2 class and on Third click it should clear the .btn-1 and .btn-2 classes... Till here, I am able to achieve this.

But If I click on the same button again, above functionality is not repeating.

FIDDLE

HTML

<button class="dealbutton">Hello</button

jQuery

$(document).ready(function(){
    $(".dealbutton").one("click", dealbuttonfn);
    function dealbuttonfn() {
        $(".dealbutton").addClass("btn-1");
        $(".dealbutton").one("click", function(){
            $(".dealbutton").removeClass("btn-1");
            $(".dealbutton").addClass("btn-2");
            $(".dealbutton").one("click", function(){
                $(".dealbutton").removeClass("btn-2");
            });
        });
}});

CSS

.dealbutton{height:200px;width:200px;background:#efefef;border:1px solid #aaa;color:#000;cursor:pointer;}
.dealbutton:focus{outline:none;}
.dealbutton.btn-1{background:#222;color:#fff;}
.dealbutton.btn-2{background:#444;color:#fff;}

When referring to `.dealbutton` inside `dealbuttonfn` function, you can use `this`. For example: `$(this).addClass("btn-1")`. — haim770, May 13 '15 at 09:11

score 2 · Accepted Answer · answered May 13 '15 at 09:17

you can use another valuable to loop on your classes my code :-

$(document).ready(function(){
    var i=0;
    $(".dealbutton").on("click", dealbuttonfn);
    function dealbuttonfn() {
        $(".dealbutton").removeClass("btn-"+i);
        i++;
        if(i>3)
            i=1;
        $(".dealbutton").addClass("btn-"+i);        
        
       
    }
});

.dealbutton{height:200px;width:200px;background:#efefef;border:1px solid #aaa;color:#000;cursor:pointer;}
.dealbutton:focus{outline:none;}
.dealbutton.btn-1{background:#222;color:#fff;}
.dealbutton.btn-2{background:#444;color:#fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="dealbutton">Hello</button>

score 1 · Answer 2 · answered May 13 '15 at 09:15

Basically didn't like your approach build my own.

$(document).ready(function () {
    $('.dealbutton').on('click', function () {
        var clickCount = parseInt($(this).data('count')) || 1; // Save click count on element itself
        clickCount %= 3; // loop over

        if (clickCount === 1) {
            $(".dealbutton").addClass("btn-1").removeClass('btn-2');
        } else if (clickCount === 2) {
            $(".dealbutton").addClass("btn-2").removeClass('btn-1');
        } else {
            $(".dealbutton").removeClass('btn-2 btn-1');
        }

        $(this).data('count', ++clickCount); // Update click count
    });
});

Demo: https://jsfiddle.net/tusharj/wc6gLzts/3/

Excellent @Tushar.. Its working perfectly... all above examples are having some problems if I click faster or 2nd time click etc... — Reddy, May 13 '15 at 09:28

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

I also did it a bit different but it still follows the basic of your creation

$(document).ready(function(){  
    $(".dealbutton").bind('click', dealbuttonfn);
    function dealbuttonfn() {
        var button = $('.dealbutton');
        if(button.hasClass("btn-1 btn-2")) {
            button.removeClass("btn-1 btn-2");
        }
        else if(button.hasClass("btn-1")) {
            button.addClass("btn-2");
        } else {
            button.addClass("btn-1");
        }
    }

});

demo

https://jsfiddle.net/wc6gLzts/2/

score 0 · Answer 4 · answered May 13 '15 at 09:22

Try this fiddle, using return false to execute the function vice versa.

$(".dealbutton").click(function() {        
        $(this).addClass('btn-1');
    $(".btn-1").click(function() {
        $(this).removeClass('btn-1');
        $(this).addClass('btn-2');
    })
    $('.btn-2').click(function() {
        $(this).removeClass('btn-2');
    })
    return false;
})

jQuery - Button CSS Class Reset after 2 Clicks

FIDDLE

4 Answers4

demo