jquery - 点击旋转图片

Question

我想在单击跨度时旋转图像。

所以 jquery 需要在点击时调用 css 效果...但是什么也没有发生。怎么了？

https://jsfiddle.net/cc4tg1b7/1/

html

<span class='l'>
    <img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png'>
    rotate image on click
</span>

CSS

.l img {
    width: 30px;
    height: 30px;
}

.li img {
    animation: spin 4s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

js

$(function () {
    $(document).on("click", ".l", function () {

        $('.l img').toggleClass(".li img");

    });
});

Answer 1

你的 css 定义和 toggleClass 的使用有一个小错误。

这是JS代码。

$('.l img').toggleClass("spin");

CSS

.l img{
  width:30px;
  height:30px;
}
.l img.spin{
  animation:spin 4s linear infinite;
}

see it in fiddle