jQueryrotate Как повернуть более 1 изображения с помощью курсора

Question

Я пытаюсь jqueryrotate плагин и просто повернуть изображение с помощью курсора. Это работает, но мой вопрос заключается в том, когда я использовал 2 изображения с одинаковым классом ID, повернуть работать только на первом изображении, как сделать, чтобы это работало отдельно

http://jsfiddle.nXt/8xwqdk71/

Я буду использовать для многих изображений.

Answer 1

Вы не можете иметь два или более объектов / элементов с одинаковыми id, Измените свой код, чтобы вместо этого нацелиться на класс.

<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;
}

РЕДАКТИРОВАТЬ: Кроме того, вам нужно иметь значение поворота, которое не распространяется на все изображения. Выше приведено несколько интересных эффектов вращения, когда у вас есть несколько изображений.

Обновленная версия находится по адресу: 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 });
        }
     } 
});