我的jQuery .click（函數）只能工作一次

我正在使用.click（）函數旋轉一個div，當另一個div被點擊時。下面是代碼我使用我的jQuery .click（函數）只能工作一次

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的時間。

來源

2015-02-10 Sheikh Awais

請出示您的標記

或嘗試下

$(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/

來源

2015-02-10 08:28:03

我已經添加HTML代碼，你可以檢查。 – 2015-02-10 08:32:32

我試過你的功能，但它也只能工作一次 – 2015-02-10 08:33:18

它每次都有效，但是如果你想旋轉塊 - 你應該改變webkitTransform的值 – 2015-02-10 08:39:56

無論如何，我提出一個 '清潔' 的方法：

jQuery的

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

CSS：

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

例如這裏：DEMO

來源

2015-02-10 08:50:46 pumpkinzzz

我的jQuery .click（函數）只能工作一次

回答

相關問題