演示

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

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

$(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，使用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 - 2次点击后按钮CSS类重置

FIDDLE

4 个答案:

演示