旋轉圖像後點擊

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的ready事件：

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

或快捷鍵：

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

2-結束標記0123之前把你的腳本：

<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請查看更新的答案以獲取更多詳細信息。 –

旋轉圖像後點擊

回答

相關問題