添加更多度每次點擊

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>