mehr Grad hinzufügen, jedes Mal klicken Sie

Question

ich mehr Grad Dreh # rad-Spin jedes Mal, wenn jemand hinzufügen möchten auf #-rad btn

$(document).ready(function(){ 
    $("#rad-btn").click(function(){ 
     $("#rad-spin").css("transform", "rotate(90deg)"); 
    }); 
}); 

Jetzt nur noch einmal 90 Grad geht es, und wenn ich auf wieder geht es nicht weiter bis 180deg (offensichtlich). Das will ich. Wer weiß, wie man das macht?

Answer 1

1. von lexikalischen Gültigkeitsbereich können Sie this.By dies tun, halten Sie den äußeren Wert index.

   $(document).ready(function(){ 
       var index = 0 
       $("#rad-btn").click(function(){ 
       index++ 
       $("#rad-spin").css("transform", "rotate(" + 90 * index + "deg)"); 
       }); 
   }); 
   

2. von data- und $.data, können Sie die Informationen im DOM speichern.

   $(document).ready(function(){ 
       $("#rad-spin").data('index', 0) 
       $("#rad-btn").click(function(){ 
       var index = $("#rad-spin").data('index') 
       $("#rad-spin").data('index', ++index) 
       $("#rad-spin").css("transform", "rotate(" + 90 * index + "deg)"); 
       }); 
   }); 
   

Answer 2

speichern Sie einfach die irgendwo Winkel.

$(document).ready(function(){ 
 
    var angle = 0; 
 
    $("#rad-btn").click(function(){ 
 
     angle+=720; 
 
     $("#rad-spin").css("transform", "rotate("+angle+"deg)"); 
 
     $(this).prop('disabled',true).delay(2000).queue(()=>$(this).prop('disabled',false).dequeue()); 
 
    }); 
 
});

#rad-spin{ 
 
    transition: transform 2s; 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 50px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='rad-btn'>v. rad</button> 
 
<div id='rad-spin'>spin me round and round</div>