如何在按钮点击事件中将图像旋转到下一个度数？

Question

我正在玩jquery.rotate.js，我希望每次都将图像旋转到下一个旋转度。

我已经包含了以下jquery图书馆：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript' src='jquery.rotate.1-1.js'></script>

jQuery代码：

$(window).load(function() {
    $("body").on("click", "#button", function() {
        $(".north").rotate(a());
    });
    nextAngle = 0;
    function a() {
        nextAngle += 90;
        if (nextAngle >= 360) nextAngle = 0;
        return nextAngle;
    }
});

HTML代码：

<img class="north" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSGPgQ8k88yaWVPRytT957hKLV-89QmZtkZc44q45TEDdqe9sKwqg">
<input type="button" id="button" value="Rotate me">

我的JSFiddle：Sample

在我当前的代码中，图像只旋转一次，但我想在按钮点击事件中每次都重新调整图像。如何使用jQuery.rotate.js？

我希望图像旋转像这样的序列：

任何想法？

感谢。

Answer 1

在Jquery中进行更改，如下所示将适用于您：

class Test {

    static int fact = 1;
    public static void main(String[] args) {
         factorial(5);      
    }

    public static void factorial(int n)
    {

        if(n>0) {

            fact = fact * (n);
            factorial(n-1);
        } else {

            System.out.println("Factorial is: "+fact);
        }

    }
}

因为单击旋转，您的图像将转换为画布。

检查Fiddle

修改

按照以下方式更改JQuery，以获得您在问号图片中提到的所需输出。

$("body").on("click", "#button", function () {
    $(".north, canvas").rotate(getNextAngle());
});

Updated Fiddle