javascript - 每次点击增加更多度数

Question

我想在每次有人点击#rad-btn 时为#rad-spin 添加更多旋转度数

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

现在它只旋转一次到 90 度，如果我再次单击它就不会再旋转到 180 度(很明显)。这就是我想要的。任何人都知道如何做到这一点？

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)");
     });
   });