点击Javascript菜单图标旋转90度，第二次点击再旋转90度

Question

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

我正在使用JavaScript中的一个函数，并希望知道如何让它在用户第二次单击时再旋转90度。

function spin(){

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

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

}

- user4796879

---

如果您使用jQuery，您可以使用toggleClass。我已经在这个codepen中制作了它：http://codepen.io/mbrillaud/pen/XJZGgj 编辑：哎呀，我没有看到Android标签，我不知道它是如何工作的。 - Mehdi Brillaud

我的任务是不使用Jquery库，因为相关应用程序正在使用纯Javascript进行样式和设计。但是感谢您的提醒，我会遵循您的代码示例。 - user4796879

Answer 1

试试这个：

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;
}

- Leonardo C

---

谢谢。第一段代码完美运行，我稍微编辑了一下以使其在Android上运行。 - user4796879

Answer 2

你可以尝试下面的函数。

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)";
       }
}

- nirmal

---

这段代码运行得很完美，但只能运行一次，你知道有什么方法可以切换它，使其在每次单击菜单图标时重复吗？我需要添加变量来识别spin1和spin2吗？我只学了一两天的Javascript。 - user4796879

我已经更新了反转代码，但是我无法理解。你想让它同时调用这两个函数。然后在onClick="spin(this)"中调用spin函数，并使用"this"获取transformed的值和amount。如果它是90，则将其转换为180，否则为90。 - nirmal

我已经编辑了Leonardo C提供的代码，并成功让它工作。我制作了一个简单的菜单图标，一旦被点击就会从+旋转到x，再次点击则反向旋转。 - user4796879

它适用于spin1和spin2吗？你正在制作一个PhoneGap应用程序吗？ - nirmal

它适用于单击和重复每次。感谢您的帮助。 - user4796879