Javascript 在悬停状态下旋转，然后单击时保持在该位置，再次单击时返回到原始位置

我想让图像在悬停状态下旋转180度。单击/选择图像时，我希望图像保持在该位置，直到再次选择图像时，图像应返回其原始位置

我尝试了CSS的组合，它对悬停效果很好，但不会持久。然后，我发现了一些使用jQuery的帖子，但我对它的理解还不够，无法在再次选择时返回图像，因为我发现的示例非常基本

HTML

<div class="conversionFormE" id="switch1">
  <label class="swapHide">Swap?</label>
  <input type="button" class="rotate" id="switch" name="switch" value="" onclick="switchUnits()"/>
</div>

谢谢你的帮助

编辑：按要求单击函数

function switchUnits(){

//need to get values before swap to and from around.
var from = $("#from").val();
var to = $("#to").val();

//switches the details
$("#to #"+from).attr("selected","selected");
$("#from #"+to).attr("selected","selected");

//gets values after switch
from = $("#from").val();
to = $("#to").val();

//run convert
convertUnits();
}

编辑：非常希望实现以下目标： 图像是否可以在悬停时再次旋转回其原始位置，而无需单击？因此，这将是：

在posA中，悬停，旋转，单击，停留在posB中。

---

在posB中，悬停，向后旋转，单击，再次停留在posA中。

尝试以下代码：

var clicked = 0;
$(".rotate").click(function () {
   clicked++;
   if (clicked == 1) {
       $(this).addClass("stay");
   }
}).bind("mouseout", function () {
    if (clicked == 2) {
        $(this).removeClass("stay").addClass('normal');
        clicked = 0;
    }
});

CSS：

.rotate:hover, .stay {
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}
.normal {
    -webkit-transform:rotate(0deg)!important;
    -moz-transform:rotate(0deg)!important;
    -o-transform:rotate(0deg)!important;
}

---

示例：

请尝试以下代码：

var clicked = 0;
$(".rotate").click(function () {
   clicked++;
   if (clicked == 1) {
       $(this).addClass("stay");
   }
}).bind("mouseout", function () {
    if (clicked == 2) {
        $(this).removeClass("stay").addClass('normal');
        clicked = 0;
    }
});

CSS：

.rotate:hover, .stay {
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}
.normal {
    -webkit-transform:rotate(0deg)!important;
    -moz-transform:rotate(0deg)!important;
    -o-transform:rotate(0deg)!important;
}

---

示例：

您可以在css中添加一个类似.rotate.rotated的选择器。rotate:hover。这样，当存在其他类时，样式也将应用

现在，您可以添加以下jQuery以在单击时切换该类：

$('.rotate').click(function() {
    $(this).toggleClass('rotated');
});

---

举个例子：

您可以在css中添加一个类似.rotate.rotated的选择器。rotate:hover。这样，当存在其他类时，样式也将应用

现在，您可以添加以下jQuery以在单击时切换该类：

$('.rotate').click(function() {
    $(this).toggleClass('rotated');
});

---

例如：

onclick=switchUnits属性指向一个javascript函数，您应该在问题中包含该函数的代码。onclick=switchUnits属性指向一个javascript函数，您应该在问题中包含该函数的代码。您好，一旦点击，它就不在原来的位置了？不过我的方式有点太复杂了。与@PeterVROver complex相比：我是jquery新手，现在每件事都过于复杂了。我单击后，它就不会保持在原来的位置上了？不过我的方式有点过于复杂了。与@PeterVROver complex相比：我是jquery新手，现在每件事情都过于复杂，iddle工作得非常完美，但当我使用代码时，它仍然不会“粘住”或停留在单击后的位置？你包括jquery吗？您的浏览器控制台中有错误吗？完全没有错误，jquery包含在内，但看起来好像没有被调用？！将函数移到包含其他函数的文件中，正如我所知，它在那里工作，但在那里不工作，然后将它移到主文件中，仍然没有乐趣？！您是否将其放入$document.ready块或类似块中，以确保DOM就绪？在检查代码时，是否在单击后添加了旋转的类？哎呀，我可能是jquery的新手。我把它放在文件里了。准备好了，效果很好！：谢谢Fiddle工作得很好，但当我使用代码时，它仍然不会“粘住”或停留在单击位置？您是否包括jQuery？您的浏览器控制台中有错误吗？完全没有错误，jquery包含在内，但看起来好像没有被调用？！将函数移到包含其他函数的文件中，正如我所知，它在那里工作，但在那里不工作，然后将它移到主文件中，仍然没有乐趣？！您是否将其放入$document.ready块或类似块中，以确保DOM就绪？在检查代码时，是否在单击后添加了旋转的类？哎呀，我可能是jquery的新手。我把它放在文件里了。准备好了，效果很好！：谢谢