Javascript Div rotate在JSFiddle中工作，但在实际项目中不工作

我试图在单击时将div旋转90°，在下一次单击时将div旋转90°

由于某种原因，旋转没有起作用，所以我将代码放入一个JSFIDLE中以解决问题，突然，相同的代码起作用了

首先，JSFIDLE：

下面是我的项目代码：

HTML和jQuery:

<script src="resources/js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="resources/styles/stylesheet.css" />
<script type="text/javascript"> 
    var rotation = 90;

    jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
    };

    $( '#control' ).click(function() {   
    $(this).rotate(rotation);
    if( rotation === 90 ) {
        rotation = 0;
    }
    else {
        rotation = 90;
    }
    });
</script>
</h:head>
<h:body>
    <div id="mainWrapper">
        <div id="header">
            <div id="control">
            </div>
        </div>
..

@charset "utf-8";
/* CSS Document */

*{
    margin:0;
    padding:0;
}

body,html {
    height: 100%;
    font-family: 'Quicksand', sans-serif;
}

div#mainWrapper {
    height: 100%;
    width: 100%;
    background-color: #03436A;
}

div#header {
    background-color: #03436A;
    width: 100%;
    height: 5%;
}

div#control {
    background:url(../images/logo_small.png) no-repeat center center;
    width: 70px;
    height: 70px;
}

div#control:hover {
    opacity: 0.7; 
}

我问这个问题是因为我希望你们中的一些人能够知道一些代码在我的项目中不起作用的可能原因，或者一些找出原因的方法

---

我还想知道的是，是否有一种简单的方法来设置旋转动画，使其移动到正确的位置，而不是立即出现在那里，但我的主要问题是为什么代码在我的项目中不起作用。

原因很简单。调用

$（“#control”）

时，元素id

control

尚未存在，因为它仅在脚本之后声明，因此失败

---

它在JSFIDLE中工作，因为它们在DOM已完全加载时在

窗口.onload

事件中调用脚本。

原因很简单。调用

$（“#control”）

时，元素id

control

尚未存在，因为它仅在脚本之后声明，因此失败

---

它在JSFIDLE中工作，因为它们在DOM已完全加载时在

窗口.onload

事件中调用脚本。

原因很简单。调用

$（“#control”）

时，元素id

control

尚未存在，因为它仅在脚本之后声明，因此失败

---

它在JSFIDLE中工作，因为它们在DOM已完全加载时在

窗口.onload

事件中调用脚本。

原因很简单。调用

$（“#control”）

时，元素id

control

尚未存在，因为它仅在脚本之后声明，因此失败

---

它在JSFIDLE中工作，因为它们在

窗口中调用您的脚本。当DOM已完全加载时，onload

事件。

JS FIDLE通常为您做一些事情（例如添加“HTML”标记），因此我怀疑您将脚本放错了位置，你应该在身体结束之前添加脚本。

JS-fiddle通常为你做一些事情（比如添加“HTML”标记），因此我怀疑你在项目中错放了脚本，你应该在身体结束之前添加脚本。

JS-fiddle通常为你做一些事情（比如添加“HTML”标记），因此，我怀疑您将脚本放错了位置，您应该在结束之前添加脚本。

JS fiddle通常会为您做一些事情（比如添加“HTML”标记），因此我怀疑您将脚本放错了位置，您应该在正文结尾之前添加脚本。

在关闭

正文之前添加脚本

标记或包装

文档。准备就绪

。谢谢您，先生，在正文中添加脚本修复了它！在关闭

正文之前添加脚本

标记或包装

文档。准备就绪

。谢谢您，先生，在正文中添加脚本修复了它！在关闭

正文之前添加脚本

标记或包装

文档。准备就绪

。谢谢您，先生，在正文中添加脚本修复了它！在关闭

正文之前添加脚本

标记或包装

文档。准备就绪

。谢谢您，先生，在正文中添加脚本修复了它！