Мой jquery .click (function) работает только один раз

Я использую функцию .click(), чтобы повернуть div при нажатии другого div. Вот код, я используюМой jquery .click (function) работает только один раз

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.

источник

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-код, вы можете проверить. –

Я пробовал вашу функцию, но он также работает только один раз –

Он работает каждый раз, но если вы хотите повернуть блок - вы должны изменить значение webkitTransform –

Во всяком случае я предлагаю 'чистый' подход:

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 (function) работает только один раз

ответ

Смежные вопросы