Onclick Javascript函数不起作用

Question

我有要旋转的图像，

<img src="images/anchor.png" alt="robot image" class="robot rotate" width="100px" height="100px" />

以下CSS代码可旋转图像

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;
}  

.rotate:hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
} 

最后是使它发生在onclick上的jquery

$(document).ready(function () {
    $('img.rotate').click(function () {
        $('img.rotate').addClass('hover');
    }, function () {
        $('img.rotate').removeClass('hover');
    });
    alert("working?");
});

但是，当我单击图像时，所有发生的都是图像由于CSS旋转。 我想发生的是单击图像时它将开始旋转，而不是当我将鼠标悬停在图像上时。

这是我的小提琴http://jsfiddle.net/sneakmiggz/7B8Ya/

Answer 1

演示版

• 在CSS中使用.hover 。 您正在从JS中添加类.hover ，css :hover对此不起作用。
• 尽可能使用$(this) 。
• 使用.toggleClass()添加/删除类。

---

CSS：

.rotate.hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
} 

---

JS：

$('img.rotate').click(function () {
    $(this).toggleClass('hover');
});

Answer 2

使用.toggleClass()代替：

$('img.rotate').click(function () {
     $(this).toggleClass('hover');
});

您还需要修改CSS以进行悬停。

演示版

Answer 3

尝试这个：

的CSS

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;



}  

.rotateHover{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
}

js

$(".rotate").on("click", function(){
    $(this).toggleClass("rotateHover");
});

小提琴

Answer 4

$(document).ready(function () {
            $('img.rotate').toggle(function () {
                $('img.robot').addClass('rotate');
            }, function () {
                $('img.robot').removeClass('rotate');
            });
        });

Answer 5

您快要准备好了，您只需要进行以下更改：

1. 删除伪悬停事件并更改为class

    .hover { -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); } 

2. 使用下面的jQuery

    $('img.rotate').click(function () { $('img.rotate').toggleClass('hover'); }); 

演示： jsfiddle.net/7B8Ya/10/

Answer 6

小提琴： http : //jsfiddle.net/7B8Ya/12/

您的错误同时存在于.js和.css中

首先，将CSS更改为.hover 。 通过使用rotate:hover { foo: bar } ，您告诉浏览器将foo:bar .rotate当鼠标移到.rotate类的.rotate时。

//NOT .rotate:hover  
.hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
} 

然后，正如另一个用户指出的那样，在您的JS中，使用.toggle删除类hover并将其添加到对象。

$(document).ready(function () {
    $('img.rotate').click(function () {
            $('img.rotate').toggleClass('hover');
        }
    )
});

Answer 7

对于一个真正的la脚/有趣的解决方案，没有任何JavaScript，您可以使用CSS选择器将焦点转移到其他位置，并旋转图像（只要将鼠标悬停在上面）。

因此，在图像之前，将常规<input>放在带有rotate类的位置，并在图像周围使用<label for="input_id">将焦点转移到输入。 在CSS中，让带有rotate类的对象使用固定的位置并移出屏幕。 确保这一点，以隐藏的身体溢出。

body {
    overflow:hidden;
}
.rotate {
    position: fixed;
    top:-100px;
}
.rotate + label img {
    /* Image stuff */
}
.rotate:focus + label img:hover {
    /* Image hovered/clicked stuff */
}

唯一的问题是您的用户将无法使用箭头键滚动和使用退格键返回页面。 这是小提琴： http : //jsfiddle.net/7B8Ya/11/

对于真正的解决方案，如果希望仅在按住鼠标按钮时才发生，可以使用:hover和:active伪类来旋转图像而无需任何JavaScript，例如： http : //jsfiddle.net / 7B8Ya / 13 /