javascript - 使用带有 2 个按钮的 jQuery 旋转图像

Question

我一直在尝试在单击向右 按钮时将图像旋转 90 度，并在单击向左 按钮时将其旋转 -90 度。我的代码在这里。我正在尝试创建某种循环，将 counter 设置为 0 并循环遍历 if 和 else 语句。但我没有让它工作:

HTML:

<button id="left" class="button">left</button>
<img src="images/cartoon.jpg" alt="Cartoon" style="width:304px;height:228px;" id="rotate">
<button id="right" class="button">right</button>

CSS:

#draaien {

}

jQuery:

$(document).ready(function(){

 var counter = 0;
 $("#left").click(function(){
 if (counter == 0){
 $("#rotate").css({
    "-webkit-transform": "rotate(-90deg)",
    "-moz-transform": "rotate(-90deg)",
    "transform": "rotate(-90deg)"  
    teller +=1;
 });
 counter=0;

 $("#rotate").css({
 }

}else if($("#right").click()){
$("#rotate").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "transform": "rotate(90deg)"

}
});
});
});

基本上我试图创建某种计数器，在单击“左”时，它会递增 1 并添加各种 CSS 元素以便它可以向左旋转，并递减 -1 以便它可以向右旋转(+90)，好像没什么效果。谢谢!

Answer 1

据我了解，您想设置一个变量来跟踪转弯度数，如果向右则加 90，如果向左则减 90。

$(document).ready(function() {
  var deg = 0;

  $(".button").on("click", function() {
    if ($(this).is("#left")) {
      deg = deg - 90;
    } else {
      deg = deg + 90;
    }
    $("#rotate").css({
      "-webkit-transform": "rotate(" + deg + "deg)",
      "-moz-transform": "rotate(" + deg + "deg)",
      transform: "rotate(" + deg + "deg)"
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left" class="button">left</button>
<img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg" alt="Cartoon" style="width:304px;height:228px;" id="rotate">
<button id="right" class="button">right</button>