CSS 和 Javascript 旋转仅在点击一次时有效？

Posted 2023-03-05

【中文标题】CSS 和 Javascript 旋转仅在点击一次时有效？

【英文标题】：CSS and Javascript rotate works only once onclick?

【发布时间】：2012-02-04 16:37:51

【问题描述】：

我正在使用它来旋转一个 div onclick 事件：

function ghum()
    document.getElementById("earth").className += " rotate";

这个逆时针旋转：

function revghum()
    document.getElementById("earth").className += " revrotate";

但它只工作一次。还有一个问题是，如果我在第一个事件之前点击第二个事件，那么第一个事件将自动不起作用。

我实际上希望这个 div 每次点击时都会旋转。 这是示例 http://maatren.com/earth/

在 rotate 和 revrotate 中，我只使用 transform 和 transition 来旋转 div，而在 id earth 中，我使用背景图像，没有任何 transform 和 transition。

【问题讨论】：

添加类后，样式将应用于 div。如果再次添加相同的 css 类，则应用相同的样式，它不适用于 x2。您应该使用这些事件自己实际更改方向。

【参考方案1】：

你的 class="rotate revrotate rotate revrotate rotate revrotate rotate revrotate"

【参考方案2】：

您可以将 jQuery 与“addClass”和“removeClass”一起使用，但不能继续使用“className +=”添加类名。

API 添加类： http://api.jquery.com/addClass/

API 移除类： http://api.jquery.com/removeClass/