Question

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

由于某些原因，旋转没有工作，所以我把代码放到JSFiddle中以找出问题并突然相同的代码工作。

这是我项目的代码：

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')时，元素标识control尚未存在，因为它仅在脚本之后声明，因此它失败。

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

Answer 2

JS小提琴通常会为你做事（比如添加“HTML”标签），所以我怀疑你错放了项目中的脚本，你应该在你的身体结束之前添加你的脚本。

Div旋转在JSFiddle中工作，但在实际项目中不起作用

2 个答案: