javascript - Div 旋转在 JSFiddle 中有效，但在实际元素中无效

Question

我试图在点击时将我的 div 旋转 90°，然后在下一次点击时向后旋转 90°。

出于某种原因，轮换不起作用，所以我将代码放入 JSFiddle 中以找出问题所在，但突然之间相同的代码起作用了。

首先是 JSFiddle:http://jsfiddle.net/YruV7/

这里是我的元素代码:

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>
..

CSS:

@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; 
}

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

我也想知道是否有一种简单的方法来为旋转设置动画，以便它移动到正确的位置，而不是立即在那里，但我的主要问题是为什么代码在我的元素中不起作用。

Answer 1

原因很简单。当你调用$('#control')时，元素idcontrol还不存在，因为它是在脚本之后声明的，所以失败了。

它在 jsFiddle 中有效，因为当 DOM 已经完全加载时，它们会在 window.onload 事件中调用您的脚本。