jQuery - кнопка CSS класса сбрасывается после 2 кликов

Question

При первом нажатии кнопки, оно должно применяться .btn-1 класс, второй клик .btn-2 класс и на третий щелчок должен очистить .btn-1 а также .btn-2 классы... До сих пор я могу достичь этого.

Но если я нажму на ту же кнопку еще раз, вышеупомянутая функциональность не повторяется.

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

Answer 1

Вы можете использовать другой ценный для зацикливания на ваших классах мой код:-

$(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>

Answer 2

По сути, не понравился твой подход.

$(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
    });
});

Демо: https://jsfiddle.net/tusharj/wc6gLzts/3/

Answer 3

Попробуйте эту скрипку, используя return false, чтобы выполнить функцию наоборот.

$(".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;
})

Answer 4

Я также сделал это немного по-другому, но это все еще следует основам вашего творчества

$(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");
        }
    }

});

демонстрация

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