Question

我有一个问题，我不知道为什么，但脚本不起作用。当我在物体中click时，他必须向右转。 Turn right 90 degress.

＆＃13;

<!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>

＆＃13;

Answer 1

您正在加载页面之前加载$('.crossRotate').on('，因此它永远不会被点击，您也不会将其包装在<script>块中。在页面底部加载JS，或将其包装在onload中。尝试：

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

Answer 2

类crossRotate没有元素，因此您可能想要添加它：

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

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<object class="crossRotate" data="https://i.pinimg.com/originals/81/6d/a5/816da533638aee63cfbd315ea24cccbd.jpg"></object>

对象旋转点击JS

2 个答案: