Question

我正在使用.click（）函数在单击另一个div时旋转div。这是我正在使用的代码

jquery的

$( document ).ready(function() {
    $( '.plane' ).click(function( event ) {
        var change = document.getElementById('stage');
        change.style.webkitTransform = 'rotateY(-60deg)';
    }); 
});

HTML

<body>

    <div id="container" style="position:absolute" >
        <div id="stage" class="stage" >
            <div id="shape"  class="smallring cube backfaces">
                <div class="plane one" onclick="rotate()">
                    <div style="overflow:hidden;width:100%;height:50%;">
                        <img id="rt" class="rt" src="1.jpg"/>
                    </div>
                    C
                </div>
                <div class="plane two">
                    <div style="overflow:hidden;width:100%;height:50%;">
                        <img class="rt" src="1.jpg"/>
                    </div>
                    R
                </div>
                <div class="plane three">
                    <div style="overflow:hidden;width:100%;height:50%;">
                        <img class="rt" src="1.jpg"/>
                    </div>
                    E
                </div>
                <div class="plane four">
                    <div style="overflow:hidden;width:100%;height:50%;">
                        <img class="rt" src="1.jpg"/>
                    </div>
                    A
                </div>
                <div class="plane five">
                    <div style="overflow:hidden;width:100%;height:50%;">
                        <img class="rt" src="1.jpg"/>
                    </div>
                    T
                </div>
                <div class="plane six">
                    <div style="overflow:hidden;width:100%;height:50%;">
                        <img class="rt" src="1.jpg"/>
                    </div>
                    I
                </div>
            </div>

        </div>

    </div>
</body>

但问题是它只在第一次工作...我希望每次点击特定的div时都会旋转div。

Answer 1

请显示您的标记

或尝试下一步

$(document.body).on('click', '.plane', function( event ) {
     var change = document.getElementById('stage');
    change.style.webkitTransform = 'rotateY(-60deg)';
});

旋转试试这个

$(document.body).on('click', '.plane', function( event ) {
     var change = document.getElementById('stage');
     var webkitTransform = change.style.webkitTransform;

     var transformValue = webkitTransform.replace('rotateY(','').replace(')','');
     transformValue = parseInt(transformValue) || 0;

     var newValue = transformValue - 60;

     change.style.webkitTransform = 'rotateY(' + newValue +'deg)';
});

http://jsbin.com/dequqapatu/1/

Answer 2

无论如何，我建议使用清洁剂＆＃39;的方法：

的jQuery

$( '.plane' ).click(function() {
   $('#stage').toggleClass("rotate");
});

CSS：

.rotate {
    -webkit-transform: rotate(60deg); /* Chrome, Safari, Opera */
    transform: rotate(60deg);
}

示例：DEMO

我的jquery .click（函数）只能工作一次

2 个答案: