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

我正在玩，我想每次旋转图像到下一个旋转度

我已经包括了以下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>

HTML代码：

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

我的朋友：

在我当前的代码中，图像只旋转一次，但我希望每次单击按钮事件时都重新旋转图像。如何使用

jQuery.rotate.js

我想要像这样的图像旋转序列：

有什么想法吗

---

谢谢。

在Jquery中进行如下更改将适用于您的：

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

因为单击“旋转”时，图像将转换为画布

检查

编辑：

对JQuery进行如下更改，以获得您在问题图像中提到的所需输出

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

---

我已经检查了您的JSFIDLE，但吸烟是错误的。图像旋转不正常。我用解释图像序列更新了我的问题。我有一个问题。在这个

$（“.north，canvas”）.rotate（90）正如我在回答中提到的，当您第一次单击“旋转我”按钮时，您的图像（img标记）将转换为画布。因此，它不会在您第二次单击时旋转<代码>$（“.north，canvas”）。旋转（90）表示单击“旋转画布”。
$("body").on("click", "#button", function () {
    $(".north, canvas").rotate(90);
});