对象旋转点击JS答案

【问题标题】：Object rotate click JS对象旋转点击JS
【发布时间】：2018-05-13 23:19:52
【问题描述】：

我有一个问题，我不知道为什么，但脚本不起作用。当我click 在对象中时，他只能右转。 Turn right 90 degress.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Awesome</title>
    <link rel="stylesheet" href="style2.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
        $('.crossRotate').on('click', function () {
            $(this).toggleClass('active');
        });
    </script>

    <style>
        object {
            width: 10%;
            height: 10%;
        }

        .crossRotate {
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;
            transition-duration: 3s;
        }

        .crossRotate.active {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }

        body {
            background-color: black;
        }
    </style>
</head>
<body>
<object data="https://i.pinimg.com/originals/81/6d/a5/816da533638aee63cfbd315ea24cccbd.jpg"></object>
</body>
</html>

【问题讨论】：

你应该使用两个脚本标签而不是一个标签上的src和内容stackoverflow.com/questions/6528325/…

标签： javascript jquery css transform

【解决方案1】：

您在页面加载之前加载$('.crossRotate').on('，因此它永远不会命中，并且您不会将其包装在<script> 块中。要么在页面底部加载 JS，要么将其包装在 onload 中。试试：

<script>
    $(function(
        $('.crossRotate').on('click', function(){
          $(this).toggleClass('active');
        });
    ));
</script>

【讨论】：