添加更多度每次点击

Question

我想更多的旋转度每有人点击一次添加到＃弧度自旋＃RAD-BTN

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

现在它只是一个时间到90度，如果我点击再次它不会进一步到180deg（显然）。这就是我想要的。任何人都知道如何做到这一点？

Answer 1

1. 通过词汇范围，你可以做到这一点。通过这个，保持外部值index。

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

2. 通过data-和$.data，你可以保存在DOM中的信息。

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

只是存储的角度地方。

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