Mehrere rotierende divs mit Javascript

Question

Ich brauche mehrere divs und jeder von ihnen sollte in der Lage sein, in vier (!) Richtungen unabhängig voneinander durch Mausklick zu drehen.

Aus dieser Frage (und einige andere) Ich habe ziemlich geeignete Weg gefunden, in 4 Richtungen drehen Rotate a div using javascript, hier (nicht in zwei, was viel einfacher ist) ist die 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 
    }); 
}); 

Aber es funktioniert gut nur für ein rotierendes Element. Sobald ich den zweiten div hinzufügen, stoppt er wie erwartet funktioniert (Rotationen nicht unabhängig sind, versuchen Sie auf „A“ zuerst klicken und dann auf „B“)

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

Ich gehe davon aus, die Ursache ist, weil Ich verwende eine "Grad" -Variable und sie wird von meinen Divs geteilt. Also, das ist die Frage - wie kann ich mehrere divs implementieren, die unabhängig voneinander gedreht werden können?

---

Ich habe den Code aktualisiert nach ersten Antworten (geänderte ID-Klasse), aber Erstausstellung mit Unabhängigkeit ist noch an seinem Platz.

Answer 1

id Attribut muss nur eins sein. Ändern Sie id in Klasse.

ist final Code Hier AKTUALISIERT:

$(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>

Answer 2

Hier ist der Code festgelegt.

$(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>