-webkit-transform旋转问题

Question

好的，我已经查看了几乎所有的旋转条目，并且无法解决这个问题。已经花了整整三天的时间来试图找出答案。这很可能是非常简单的事情，但我无法得到它。这是问题：我有2个图像具有旋转控件。但是，当我旋转1时，它们都旋转。我希望他们不要同时旋转，而是自己旋转。你可以在这里看到：http://dl.dropbox.com/u/11770605/sample2.html

下面是main.js下面的代码：

$(document).ready(function(){ $('.cc-element').rotatable(); }); 

和这里的标记：

<span id="cc-element-1" class="cc-element ui-draggable cc-active" style="-webkit-transform: rotate(0deg);" ><image goes here></span> 

我也试过：

$(document).ready(function(){ 
    $('.cc-element').rotatable(); 
    $('.cc-element2').rotatable(); 
    }); 

and

<span id="cc-element-2" class="cc-element ui-draggable cc-active" style="-webkit-transform: rotate(0deg);" > <image goes here>< /span> 

但该修改不起作用。请帮助我，我必须尽快解决这个问题。

Answer 1

的问题是，你的“旋转（）”插件上this值传递给它，其中，当您的选择是“.CC元件”将两个元件的一个列表操作。因此，您对“roll（）”插件的调用将在整个列表中进行操作。

您需要在该插件中的“each（）”迭代器中包装适当的代码。例如：

$.fn.rotatable = function() { 
     return this.each(function() { 
     var $this = $(this), 
      // ... the rest of the plugin, as it is now ... 
     }); 
    }; 

Answer 2

您正按类选择元素，它们都具有相同的类。改变它是这样的：

$(document).ready(function(){ 
    $('#cc-element').rotatable(); 
    $('#cc-element2').rotatable(); 
    });