jQuery

Question

第一次点击按钮，它应该应用 .btn-1 class，第二次点击 .btn-2 class，第三次点击它应该清除 .btn-1 和.btn-2 class是... 到这里，我能够做到这一点。

但是如果我再次点击同一个按钮，上面的功能是不重复。

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 () {
    $('.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 2

你可以使用另一个有价值的东西来循环你的类我的代码：-

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

我也做了一点不同，但它仍然遵循你创作的基础

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

Answer 4

试试这个 fiddle, using 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;
})

jQuery - 按钮 CSS Class 点击 2 次后重置

jQuery - Button CSS Class Reset after 2 Clicks

jquery-click-event

FIDDLE

演示