每次单击时添加更多度数答案

【问题标题】：Add more degrees everytime you click每次单击时添加更多度数
【发布时间】：2016-11-06 14:01:51
【问题描述】：

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

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

现在它只会转到 90 度，如果我再次单击它就不会再转到 180 度（显然）。这就是我想要的。。有人知道怎么做吗？

【问题讨论】：

标签： javascript jquery css rotation transform

【解决方案1】：

通过词法范围，你可以这样做。通过这个，保持外部值index。

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

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

【讨论】：

现在我还有另一个问题。我想要按钮：#rad-btn。在旋转时禁用..（顺便说一句，这是一个旋转轮） ivoklerk.com/sesamestreet/rad.html# – user3124133 刚刚编辑
我无法得到你的目标。用户可以在动画结束前多次点击#rad-btn？ @user3124133
不，当它旋转时，用户应该不能点击。现在，如果您多次单击，它会越来越快地旋转。重新开始旋转的按钮应该只能在动画前后点击。
我不能在这里添加太多代码，根据我的想法，1.你应该在click监听器中隐藏#rad-btn。 2.你应该在#rad-spin的event transitionend添加监听器。当过渡结束时，你可以让btn显示。 @user3124133

【解决方案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>

【讨论】：

谢谢我已经用 TomIsion 的解决方案修复了它。现在我还有另一个问题。我想要按钮：#rad-btn。在旋转时被禁用..（顺便说一句，这是一个旋转轮）ivoklerk.com/sesamestreet/rad.html#
有多种方法可以做到这一点，我在答案中添加了一种。您在 css 中定义过渡超时，禁用按钮，然后在单击相同的延迟后启用它。