jQuery 旋转函数 Img 选择答案

【问题标题】：jQuery Rotate Function Img SelectingjQuery 旋转函数 Img 选择
【发布时间】：2012-04-26 03:48:04
【问题描述】：

我正在尝试在单击我的 div 时使用 jQuery 将图像旋转 90 度。为什么它不起作用？

这是我的 HTML ...

<div class="class1">
    <div class="class2">
        <img id="whatever">
    </div>
</div>

.. 这是我的 jQuery ;

  jQuery(document).ready(function() {
       jQuery(".class1").click(function()
               {
            jQuery(this).find('img').rotate({animateTo:-90})
               });
             });

如果有帮助， http://code.google.com/p/jqueryrotate/wiki/Examples

注意：我需要代码来查找第一张图片...而不仅仅是通过 id 获取图片，然后旋转它。

【问题讨论】：

您确定正在加载旋转插件吗？ Chrome 控制台或 Firebug 控制台会显示什么错误？
我不确定如何检查 Chrome 控制台。刚查了一下。得到这个错误：'Uncaught TypeError: Object [object Object] has no method 'rotate''

标签： javascript jquery function html selector

【解决方案1】：

根据@Abdullah Jibaly 的帖子并查看评论。我想你错过了像

<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

这是一个在第一张图片上旋转的示例http://jsfiddle.net/oamiamgod/BeUBF/2/

【讨论】：

【解决方案2】：

您的代码看起来不错，我猜该插件没有被加载或给定上下文之外的其他东西出错了。

要获得您可以使用的第一个 img：

jQuery(this).find('img').first().rotate({animateTo:-90})

【讨论】：

打开 Chrome 控制台或 Firebug 控制台，您应该会看到一个错误。
在 Chrome 中，使用 Cmd + Option + i (mac)。
我认为 Windows 是 Ctr + Alt + i 或 Ctrl + Shift + i。
Uncaught TypeError: Object [object Object] has no method 'rotate'
是的，很可能是插件加载失败。

【解决方案3】：

//根据使用情况

<div class="class1">
    <div class="class2">
        <img src="https://www.google.com/images/srpr/logo3w.png">
        <img src="https://www.google.com/images/srpr/logo3w.png" >
    </div>
</div>
        <button id='test'>click</button>

<script>
jQuery(document).ready(function() {
    var setvalue=90;
    jQuery("#test").click(function() {
        jQuery('.class1').find('img').rotate({
            animateTo: setvalue
        });
                setvalue=setvalue+90;        
    });
});
</script>

https://code.google.com/p/jqueryrotate/wiki/Examples

【讨论】：

【解决方案4】：

class 名称的第一个字母不应是数字，将它们改为class1 和class2，并为animateTo 值添加引号：

<div class="class1">
    <div class="class2">
        <img id="whatever">
    </div>
</div>

  $(document).ready(function() {
       $(".class1").click(function(){
            $(this).find('img').rotate({animateTo: "-90"})
       });
  });

【讨论】：

我写了'1'和'2'作为例子。在我的剧本中，它们是文字。不过我在这里修好了。
不确定如何检查。我正在使用铬。
所以右键单击视口并选择Inspect Element 并找到控制台部分并查看它。
'Uncaught TypeError: Object [object Object] has no method 'rotate'
所以说明你还没有加载插件，检查script标签，确保插件路径正确，插件之前已经加载了jquery核心库。

【解决方案5】：

试试看

    <div class="class1">
        <div class="class2">
            <img id="whatever">
        </div>
    </div>


jQuery(document).ready(function() {
    jQuery(".class1").click(function()
    {
       $("#whatever").rotate(90);
    });
});

【讨论】：