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

但

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

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

Answer 1

问题是你的“rotatable()”插件对传递给它的 this 值进行操作，当你的选择器是“.cc-element”时，该值将是一个列表两个元素。因此，您对“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();
    });