使用Javascript的几个旋转div

我需要有几个div，每个div应该能够通过鼠标点击在四个（！）方向上独立旋转

从这个问题（以及其他一些问题）中，我找到了在4个方向上旋转的非常合适的方法（而不是在两个方向上旋转，这要容易得多） ，这是

JS:

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

A
B

我想，根本原因是因为我使用了一个“度”变量，它在我的div之间共享。所以，这就是问题所在-我如何实现几个可以独立旋转的div

---

---

我已经根据最初的答案更新了代码（将id更改为class），但独立性的初始问题仍然存在。

id

属性必须只有一个。将

id

更改为类

已更新

以下是最终代码：

$（文档）.ready（函数（）{
$（'.rotating'）。单击（函数（）{
var currentDeg=$（此）.attr（“数据deg”）；
$（this.css（{'-moz transform'：'rotate（'+currentDeg+'deg'）}）；
$（this.css（{webkitttransform:'rotate（'+currentDeg+'deg'）}）；
currentDeg=评估值（currentDeg）+评估值（90）；
$（this.attr（“数据度”，currentDeg.toString（））；
//恢复
如果（当前度数>270）{
$（此）.attr（“数据度”，“0”）；
}
});
});
。旋转{
宽度：20px；
高度：20px；
背景色：红色；
边际上限：0px；
}

A.
id
属性只能是一个。将
id
更改为类

已更新

以下是最终代码：


$（文档）.ready（函数（）{
$（'.rotating'）。单击（函数（）{
var currentDeg=$（此）.attr（“数据deg”）；
$（this.css（{'-moz transform'：'rotate（'+currentDeg+'deg'）}）；
$（this.css（{webkitttransform:'rotate（'+currentDeg+'deg'）}）；
currentDeg=评估值（currentDeg）+评估值（90）；
$（this.attr（“数据度”，currentDeg.toString（））；
//恢复
如果（当前度数>270）{
$（此）.attr（“数据度”，“0”）；
}
});
});
。旋转{
宽度：20px；
高度：20px；
背景色：红色；
边际上限：0px；
}

A.
A
这是您的代码

$（文档）.ready（函数（）{
变量度=0；//当前旋转角度，0->0，1->90，2->180，3->270
$（'.rotating'）。单击（函数（）{
$（this.toggleClass（'rotated'+degree.toString（））；//禁用以前的旋转
度=（度+1）%4；
$（this.toggleClass（'rotated'+degree.toString（））；//添加新的旋转
});
});

标记：

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

A
B
这是您的代码修复

$（文档）.ready（函数（）{
变量度=0；//当前旋转角度，0->0，1->90，2->180，3->270
$（'.rotating'）。单击（函数（）{
$（this.toggleClass（'rotated'+degree.toString（））；//禁用以前的旋转
度=（度+1）%4；
$（this.toggleClass（'rotated'+degree.toString（））；//添加新的旋转
});
});

标记：

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

A
B
谢谢，我还在div'class=“rotating rotated0”中添加了初始旋转。但经过几次尝试，我发现看起来点击仍然不是独立的。单击第一个div，然后单击第二个div。预期行为-两者都应旋转90度。实际-秒旋转180。更新。删除了重复的行
$（this.toggleClass（'rotated'+degree.toString（））它不是重复的，它正在禁用以前的转换。。没有它就不能工作（试着循环旋转4次以上）太好了，这正是我需要的！非常感谢。谢谢，我还在div'class=“rotating rotated0”中添加了初始旋转。但经过几次尝试，我发现看起来点击仍然不是独立的。单击第一个div，然后单击第二个div。预期行为-两者都应旋转90度。实际-秒旋转180。更新。删除了重复的行
$（this.toggleClass（'rotated'+degree.toString（））它不是重复的，它正在禁用以前的转换。。没有它就不能工作（试着循环旋转4次以上）太好了，这正是我需要的！非常感谢。看起来更好，但点击仍然不是独立的（参见Dave的示例）。有什么想法吗？啊，有@教父如果你希望你的点击是独立的，你需要用
$（这个）
**替换
$（'.rotating'）
，但是保持
$（'.rotating'）。点击
同样的效果更好，但是点击仍然不是独立的（见Dave的例子）。有什么想法吗？啊，有@教父如果你希望你的点击是独立的，你需要将
$（'.rotating'）
替换为
$（this）
**但是保持
$（'.rotating'）。点击相同的
<div class="rotating">A</div>
<div class="rotating">B</div>