Question

我有一个旋转div的按钮，称为培根，90度。

如果我按下按钮一次，代码可以正常工作，将div旋转90度。

如果我再次按下按钮，则不会发生任何其他情况。

$("#button").on("click", function () {
    $("#bacon").css({
        '-moz-transform':'rotate(90deg)',
        '-webkit-transform':'rotate(90deg)',
        '-o-transform':'rotate(90deg)',
        '-ms-transform':'rotate(90deg)',
        'transform':'rotate(90deg)'
    });
});

我希望上面的代码能让我保持无限旋转。所以我按下它一次，它将培根从原来旋转90度，两次旋转原始180度，三次旋转270度，等等。

感谢。

*编辑：我有一个名为#button2的第二个按钮与#button相同，但逆时针方向除外。当我按#button时它会旋转90度，然后#button2将其恢复原状，按#button将再次工作并再次旋转90度。

基本上，按下按钮后，只有另一个按钮会随后工作，所以我只能在2种状态之间切换，而不是允许完全旋转所有4种状态。

Answer 1

将旋转放在变量中，每次都递增：

var cur_rotation = 0;
$("#button").on("click", function() {
    cur_rotation = (cur_rotation + 90) % 360;
    var rot = 'rotate('+cur_rotation+'deg)';
    $("#bacon").css({
        '-moz-transform':rot,
        '-webkit-transform':rot,
        '-ms-transform':rot,
        'transform':rot
    });
});

第二个按钮应该相同，除了它减去90而不是添加。

Answer 2

您也可以使用课程：

var cls = ['rotate-90', 'rotate-180', 'rotate-270', 'rorate-360'],
      i = 0;

$("#button").on("click", function () {
    $("#bacon").removeClass(cls.join(' ')).addClass(cls[i % cls.length]);
    i++;
});

HTML / JQuery：Button只工作一次

2 个答案: