首先点击按钮,它应该应用.btn-1
课程,第二次点击.btn-2
课程,第三次点击它应该清除.btn-1
和.btn-2
课程...
到此为止,我能够做到这一点。
但如果我再次点击同一个按钮,则上述功能不会重复。
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;}
答案 0 :(得分: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>
答案 1 :(得分: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
});
});
答案 2 :(得分:0)
我也做了一点不同但它仍然遵循你创作的基础
$(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");
}
}
});
答案 3 :(得分:0)
尝试使用此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;
})