jquery-rotate - jQueryrotate 如何通过光标旋转超过 1 个图像

Question

我正在尝试 jqueryrotate 插件并简单地通过光标旋转给定的图像。它可以工作，但我的问题是当我使用 2 个具有相同 ID 类的图像时，旋转只在第一个图像上工作，如何让它单独工作

http://jsfiddle.nXt/8xwqdk71/

我将用于许多图像。

Answer 1

You can't have two or more objects / elements with the same id. Modify your code to target a class instead.

<img src="https://www.google.com/images/srpr/logo3w.png" class="image">

var value = 0
$(".image").rotate({ 
   bind: 
     { 
        click: function(){
            value +=90;
            $(this).rotate({ animateTo:value})
        }
     } 
});

.image{
  margin:100px 100px;
}

EDIT: In addition, you need to have a rotation-value that isn't globally shared between all the images. The above will give you some interesting spinning effects when you have multiple images.

An updated version is at: http://jsfiddle.net/0nwvt303/

<img src="https://www.google.com/images/srpr/logo3w.png" class="image" rotation=0>
<img src="https://www.google.com/images/srpr/logo3w.png" class="image" rotation=0>

$(".image").rotate({ 
   bind: 
     { 
        click: function(){
            currRotation = ($(this).attr("rotation") * 1) + 90;
            $(this).attr("rotation", currRotation);
            $(this).rotate({ animateTo:currRotation });
        }
     } 
});