Several rotating divs using Javascript

Question

I need to have several divs and each of them should be able to rotate in four(!) directions independently by mouse click.

From this question (and some other) I've found pretty suitable way to rotate in 4 directions (not in two which is much easier) Rotate a div using javascript, here is the fiddle

JS:

$(document).ready(function() {
  var degree = 0; //Current rotation angle, 0->0, 1->90, 2->180, 3->270
  $('.rotating').click(function() {
    $(this).toggleClass('rotated' + degree.toString()); //Disable previous rotation
    degree = (degree + 1) % 4;
    $(this).toggleClass('rotated' + degree.toString()); //Add new rotation
  });
});

But it works well only for one rotating element. As soon as I add the second div, it stops working as expected (rotations are not independent, try to click on "A" first and then on "B")

<div class="rotating rotated0">A</div>
<div class="rotating rotated0">B</div>

I assume, the root cause is because I use one "degree" variable and it's shared between my divs. So, that's the question - how can I implement several divs which can be rotated independently?

I've updated the code according to first answers (changed id to class), but initial issue with independence is still in place.

Dave · Accepted Answer · 2016-08-04T08:50:31.573

1

id attribute must be only one. Change id into class.

UPDATED

Here is final code:

$(document).ready(function() {
   
  $('.rotating').click(function() {
    var currentDeg   =  $(this).attr("data-deg");
  
    $(this).css({ '-moz-transform': 'rotate(' + currentDeg + 'deg)'});
    $(this).css({ WebkitTransform: 'rotate(' + currentDeg + 'deg)'});
    
    currentDeg = eval(currentDeg)+eval(90);
    
    $(this).attr("data-deg", currentDeg.toString());
    
    //restore
    if(currentDeg > 270){
      $(this).attr("data-deg", "0");
    }
    
  });
});

.rotating {
  width: 20px;
  height: 20px;
  background-color: red;
  margin-top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotating" data-deg="90">A</div>
<div class="rotating" data-deg="90">A</div>

edited Aug 04 '16 at 08:50

answered Aug 04 '16 at 08:04

Dave

2,764
2
15
27

Thanks, I've also added initial rotation to div 'class="rotating rotated0"'. But after several tries, i've found that looks like clicks are not independent still. Click first div and then second div. Expected behavior - both should be rotated 90 degrees. Actual - second was rotated 180. – The Godfather Aug 04 '16 at 08:13
Updated. Removed duplicate line `$(this).toggleClass('rotated' + degree.toString());` – Dave Aug 04 '16 at 08:15
It was not duplicate, it was disabling previous transform.. It doesn't work without it (try to rotate in cycle more than 4 times) – The Godfather Aug 04 '16 at 08:16
Great, this is exactly what I need! Thank you! – The Godfather Aug 04 '16 at 09:22

Joseph · Answer 2 · 2016-08-04T11:47:09.410

1

Here is your code fixed.

    $(document).ready(function() {
      var degree = 0; //Current rotation angle, 0->0, 1->90, 2->180, 3->270
      $('.rotating').click(function() {
        $(this).toggleClass('rotated' + degree.toString()); //Disable previous rotation
        degree = (degree + 1) % 4;
        $(this).toggleClass('rotated' + degree.toString()); //Add new rotation
      });
    });

Markup:

<div class="rotating">A</div>
<div class="rotating">B</div>

edited Aug 04 '16 at 11:47

answered Aug 04 '16 at 08:05

Joseph

1,003
3
11
25

Looks better, but clicks are not independent still (see Dave's example). Any ideas? – The Godfather Aug 04 '16 at 08:14
Ahh, yes. @TheGodfather If you want your clicks to be independent, you need to replace `$('.rotating')` with `$(this)` **but keep `$('.rotating').click` the same – Joseph Aug 04 '16 at 11:46

Several rotating divs using Javascript

2 Answers2