Question

我需要有几个div，每个div都可以通过鼠标点击独立旋转四个（！）方向。

从这个问题（以及其他一些问题）我发现了非常适合在4个方向上旋转的方式（不是两个方向更容易） Rotate a div using javascript，这是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
  });
});

但它仅适用于一个旋转元件。一旦我添加了第二个div，它就会停止按预期工作（旋转不是独立的，尝试点击＆＃34; A＆＃34;首先然后点击＆＃34; B＆＃34;）

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

我认为，根本原因是因为我使用了一个＆＃34; degree＆＃34;变量，它在我的div之间共享。那么，那就是问题 - 如何实现几个可以独立旋转的div？

我已根据第一个答案更新了代码（将ID更改为类），但最初的独立问题仍然存在。

Answer 1

id属性必须只有一个。将id更改为课程。

<强>已更新

这是最终代码：

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

这是您的代码已修复。

    $(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
      });
    });

标记：

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

使用Javascript的几个旋转div

2 个答案: