Поворот объекта нажмите JS - PullRequest
Новая
       6

Поворот объекта нажмите JS

0 голосов
/ 14 мая 2018

У меня проблема, я не знаю почему, но скрипт не работает. Когда я 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>

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Нет элемента с классом 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>
0 голосов
/ 14 мая 2018

Вы загружаете $('.crossRotate').on(' до загрузки страницы, поэтому она никогда не попадет, и вы не заключите ее в блок <script>. Либо загрузите JS внизу страницы, либо оберните его в onload. Попробуйте: 

<script>
    $(function(
        $('.crossRotate').on('click', function(){
          $(this).toggleClass('active');
        });
    ));
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...