Как вращать блок каждый раз при нажатии на кнопку?

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

Я думаю, что проблема с ненужными 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 2

В этом случае вам придется увеличивать или уменьшать 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;
      }

    });

Answer 3

Вам нужно сохранить промежуточную сумму в 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