javascript - 按下其他按钮后无法第二次按下按钮以激活旋转

Question

我的代码有问题:我无法在按下其他按钮后再次按下按钮来激活旋转。

你会在这里看到我的问题http://jsfiddle.net/HCP46/8/ :

<script src="js/jquery-1.9.1.min.js"></script>
<script>
$("#continue1").click(function(){
$(".rotate").toggleClass("rotate1");
});
$("#continue2").click(function(){
$(".rotate").toggleClass("rotate2");
});
$("#continue3").click(function(){
$(".rotate").toggleClass("rotate3");
});
$("#continue4").click(function(){
$(".rotate").toggleClass("rotate4");
});
$("#continue5").click(function(){
$(".rotate").toggleClass("rotate5");
});
</script>

Answer 1

您需要删除所有其他 rotate 类，因为它们在 CSS 中具有优先权。

您还可以使用从元素派生旋转类名称的单个绑定(bind)来简化此操作。

$("button").on('click', function () {
    $(".rotate").removeClass().addClass("rotate rotate" + $(this).text());
});

http://jsfiddle.net/HCP46/9/