このボタンが回転しないのはなぜvisual studioですか？

このコードスニペットを実行すると、ボタンが表示されます。クリックすると、回転します。私はVisual Studioでまったく同じコードを持っています（下の図を参照）。しかし、私がコードをデバッグするか 'ブラウザ（Google Chrome）で見る'を押すと、まったく動作しません。このボタンが回転しないのはなぜvisual studioですか？

$("#rotate").click(function() { 
 
    if ($(this).css("transform") == 'none') { 
 
     $(this).css("transform", "rotate(45deg)"); 
 
    } else { 
 
     $(this).css("transform", ""); 
 
    } 
 
});

body { 
 
} 
 

 
#rotate { 
 
    width: 30px; 
 
    height: 30px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
\t <meta charset="utf-8" /> 
 
    <link rel="stylesheet" href="css/css.css" /> 
 
    <script src="scripts/jquery-2.1.1.js"></script> 
 
    <script src="scripts/JavaScript.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <button id="rotate"></button> 
 
</body> 
 
</html>

出典

2016-08-13 2hTu2

コンソールに何かエラーがありますか？ – FrankerZ

まず、jQueryを2回ロードしないでください。 –

エラーは発生せず、警告もありません。それは私にボタンを示しています。しかし、それは回転しません – 2hTu2

あなたは$(document).ready(function() { });の内側に結合あなたのボタンをラップしましたか？それはあなたの例から明らかではないので、それは正常に動作するためです。

&(document).ready機能を使用せずにボタンの下にJavaScriptコードを配置すると、ボタンの上にある場合ブラウザはまだ終了していないボタンをバインドしようとするため、機能します。

<script> 
     $(document).ready(function() { 
      $("#rotate").click(function() { 
       if ($(this).css("transform") == 'none') { 
        $(this).css("transform", "rotate(45deg)"); 
       } else { 
        $(this).css("transform", ""); 
       } 
      }); 
     }); 
    </script> 
    <style> 
     #rotate { 
      width: 100px; 
      height: 30px; 
     } 
    </style> 
    <button id="rotate" type="button">button</button>

出典

2016-08-13 12:45:27 VDWWD

このボタンが回転しないのはなぜvisual studioですか？

答えて

関連する問題