每次单击按钮时如何旋转块？

Question

更确切地说，块的旋转不起作用。

此刻，该方块会旋转一次，每次我在两个方向上单击时我都想旋转。

如何做到？

var now = 10
$('.left').click(function() {

  $(".d").css('transform', 'rotate (' + now + 'deg)');
});

.r {
  width: 200px;
  height: 200px;
  border: 20px solid;
  border-radius: 50%;
}

.d {
  width: 200px;
  height: 200px;
  border: 20px solid blue;
  border-radius: 50%;
}

.wrapper {
  width: 230px;
}

.parent {
  width: 240px;
  height: 240px;
  position: relative;
}

.r,
.d {
  position: absolute;
}

.d {
  border-right-color: transparent;
  border-top-color: transparent;
  transform: rotate(45deg);
}

.btns {
  display: table;
  margin: 10px auto;
}

button {
  margin-left: 10px;
}

<div class="wrapper">
  <div class="parent">
    <div class="r"></div>
    <div class="d"></div>
  </div>

  <div class="btns">
    <button class="left">+</button>
    <button class="right">-</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

一开始，我想制作一个如屏幕截图所示的调节器。

但是由于JS知识不多，所以我决定使用HTML和CSS + jQuery

想要使用svg，但我不知道如何更改

希望得到您的帮助

Answer 1

您需要在now中保持运行总计，以便可以继续增加。例如：

var now = 0;

$('.left').click(function() {
  now += 10;
  $(".d").css('transform', 'rotate(' + now + 'deg)');
});

$('.right').click(function() {
  now -= 10;
  $(".d").css('transform', 'rotate(' + now + 'deg)');
});

正如另一个人刚刚指出的那样，您在rotate和(之间的空格也正在破坏它。

如果需要的话，这里是一个CodePen：https://codepen.io/MSCAU/pen/MZgqop

Answer 2

我认为问题是不必要的spaces，我希望将其删除，希望对您有所帮助。

var now = 10;

    $('.left').click(function() {
      now += 10;
      $(".d").css('transform', 'rotate('+now+'deg)');
    });

    $('.right').click(function() {
      now -= 10;
      $(".d").css('transform', 'rotate('+now+'deg)');
    });

Answer 3

在这种情况下，您必须一次又一次地增加或减少10 deg，这是一个示例：

$(function(){
      var now = 10,
      count = 0;
      $('.left').click(function() {
        rotate( count + 1);
      });
      $('.right').click(function() {
        rotate( count - 1);
      });

      function rotate(new_count) {
        var rotatePx = ((new_count) * (now));
        $(".d").css('transform', 'rotate('+ rotatePx +'deg)');
        count = new_count;
      }

    });