jQuery旋转功能Img选择

时间:2012-04-26 03:48:04

标签: javascript jquery function html selector

我正在尝试使用jQuery在点击我的div时将图像旋转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获取图片,然后旋转它。

5 个答案:

答案 0 :(得分:2)

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

这样的东西
<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

以下是旋转第一张图片http://jsfiddle.net/oamiamgod/BeUBF/2/

的示例

答案 1 :(得分:1)

您的代码看起来很好,我猜这个插件没有被加载或者在给定的上下文之外的其他东西出错了。

要获得第一个img,您可以使用:

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

答案 2 :(得分:1)

//根据使用它          

<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

答案 3 :(得分:0)

class名称的第一个字母不应该是数字,而是将其更改为class1class2,并为animateTo值添加引号:

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

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

答案 4 :(得分:0)

试试吧

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


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