Поворот изображения с помощью JavaScript после нажмите

img { 
 
    display: block; 
 
    margin: 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.crossRotate { 
 
    -webkit-transition-duration: 1s; 
 
    -moz-transition-duration: 1s; 
 
    -o-transition-duration: 1s; 
 
    transition-duration: 1s; 
 
    -webkit-transition-property: -webkit-transform; 
 
    -moz-transition-property: -moz-transform; 
 
    -o-transition-property: -o-transform; 
 
    transition-property: transform; 
 
    outline: 0; 
 
} 
 

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

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
<script> 
 
    $('.crossRotate').on('click', function(){ 
 
    $(this).toggleClass('active'); 
 
    }); 
 
</script> 
 
<link rel="stylesheet" href="StyleSheet.css"> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <img class="crossRotate" src="https://s31.postimg.org/cf0ip4gd7/logo.gif" alt="Cross Menu button" tabindex="1" /> 
 
</body> 
 
</html>

Здравствуйте, я пытаюсь сделать это изображение поворот на 180 градусов после щелчка. Я скопировал почти все: http://jsbin.com/bukacesari/edit?html,css,js,output, но он по-прежнему не работает для меня. Можете ли вы объяснить мне, почему и как я могу это исправить? Это может быть глупый вопрос, но я не знаю, почему он не работает. Благодаря

источник

2016-07-25 Lukáš Jirůšek

Вы должны ждать документа, который будет полностью загружено, чтобы прикрепить событие щелчка, для этого вы можете использовать один из следующих способов:

1- JQuery готового событие:

$(document).ready(function() { 
    //DOM is fully loaded. you can safely attach events 
});

Или ярлык:

$(function() { 
    //DOM is fully loaded. you can safely attach events 
});

2- Поместите свой сценарий перед закрывающим тегом </body>:

<body> 
    <!-- Your HTML Here --> 
    <script> 
     //The page can be manipulated safely here ! 
    </script> 
</body>

Пример использования $(function() {....}):

img { 
 
    display: block; 
 
    margin: 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.crossRotate { 
 
    -webkit-transition-duration: 1s; 
 
    -moz-transition-duration: 1s; 
 
    -o-transition-duration: 1s; 
 
    transition-duration: 1s; 
 
    -webkit-transition-property: -webkit-transform; 
 
    -moz-transition-property: -moz-transform; 
 
    -o-transition-property: -o-transform; 
 
    transition-property: transform; 
 
    outline: 0; 
 
} 
 
.crossRotate.active { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
    <link rel="stylesheet" href="StyleSheet.css"> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
    <script> 
 
    $(function() { 
 
     $('.crossRotate').on('click', function() { 
 
     $(this).toggleClass('active'); 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <img class="crossRotate" src="https://s31.postimg.org/cf0ip4gd7/logo.gif" alt="Cross Menu button" tabindex="1" /> 
 
</body> 
 

 
</html>

источник

2016-07-26 00:02:25

Так что я в основном должны поместить этот сценарий после того, как файл CSS? Спасибо за помощь в любом случае, он работает отлично. –

@Ismail RBOUH верен, вы должны добавить функцию щелчка после загрузки страницы, чтобы javascript действительно мог найти ваш элемент, к которому привязан обработчик кликов. В исходной настройке javascript запускается до того, как загружается страница (и все ее элементы), и она еще не видит элемент «.crossRotate», поэтому он не может прикреплять к ней обработчик кликов. Следующий код - это функция загрузки, которая запускается после загрузки веб-страницы: $ (function() { // напишите здесь код }); – Josh

@ LukášJirůšek Пожалуйста, ознакомьтесь с обновленным ответом для получения дополнительной информации. –

Поворот изображения с помощью JavaScript после нажмите

ответ

Смежные вопросы