Javascript 菜单图标可旋转 90 度 Onclick 并在第二次单击时旋转 90 度答案

【问题标题】：Javascript menu icon to rotate 90 Degrees Onclick and rotate 90 degrees on second clickJavascript 菜单图标可旋转 90 度 Onclick 并在第二次单击时旋转 90 度
【发布时间】：2015-06-22 23:32:10
【问题描述】：

我希望在单击时将菜单图标旋转 90 度，并在用户第二次单击时旋转 90 度。

我在 Javascript 中使用一个函数，想知道当用户第二次点击时如何让它再旋转 90 度。

function spin(){

    var spin1 = document.getElementById("spin");
        spin2 = document.getElementById("spin");

    spin1.style.transform = "rotate(90deg)";

}

【问题讨论】：

如果你使用 jQuery，你可以只使用一个 toggleClass。我已经在这个 codepen 中做到了：codepen.io/mbrillaud/pen/XJZGgj 编辑：哎呀，我没有看到 Android 标签，我不知道它是如何工作的。
我的任务是不使用 Jquery 库，因为所讨论的应用程序是用纯 JavaScript 设计和设计的。但是感谢您的提醒，我会按照您的代码笔进行操作

标签： javascript android jquery rotation transform

【解决方案1】：

你可以试试下面的功能

var click =false
function spin(){
        var spin1 = document.getElementById("spin");
        var spin2 = document.getElementById("spin");
    if(!click){
        spin1.style.transform = "rotate(90deg)";
        click=true;
       }else{
        click=false;
        spin1.style.transform = "rotate(180deg)";
       }
}

【讨论】：

这段代码完美运行，但只运行一次，你知道有一种方法可以切换它，以便每次单击菜单图标时都会重复吗？我是否需要添加变量来识别 spin1 和 spin2。只做了一天左右的Javascript
我已经更新了反转它的代码。但我无法理解。你希望它同时调用这个函数。然后调用自旋函数 onClick="spin(this)" 并获取转换为 "this" 的值并获取数量。如果是 90，则转换 180，否则转换为 90。
我编辑了 Leonardo C 提供的代码，并设法让它工作。我制作了一个简单的菜单图标，一旦单击它就会从 + 旋转到 x，然后再次单击时反向旋转。
两者都适用吗？自旋 1 和自旋 2。你在做一个 phonegap 应用吗？
它适用于每次点击和重复。感谢您的帮助

【解决方案2】：

试试这个：

var angle = 0;
function spin(){
    var spin1 = document.getElementById("spin");
    spin2 = document.getElementById("spin");
    angle+=90;
    spin1.style.transform = "rotate("+angle+"deg)";
}

这将让它在每次按下时旋转 90 度。如果你想限制为 2：

var flag = false;
function spin(){
    var spin1 = document.getElementById("spin");
    spin2 = document.getElementById("spin");
    spin1.style.transform = "rotate("+(flag?180:90)+"deg)";
    flag = true;
}

【讨论】：

谢谢。第一个代码完美运行，我对其稍作编辑以使其能够在 Android 上运行。