在按钮单击时切换时更改变量的值

Question

我想在切换按钮时更改变量的值。 基于此，我想通过CSS切换图标的旋转

// this is the variable I want to change 
var flag;

$(".outer_rotate_aero").click(function() {
  $(".outer_rotate_aero_fa1").toggleClass("down");
  flag = false;

  $(".rotate_aero1").click(function() {
    flag = true;
    $(".fa2").toggleClass("down");
  });

  // I want to toggle a class containing a icon (ie rotate)
  if (flag == true) {
    $(".fa2").toggleClass("down");
  }
});

Answer 1

 var rotate = true; $("div").html("rotate(0)") $("div").click(function(){ rotate? $(this).html("rotate(180deg)"):$(this).html("rotate(0)") $(this).toggleClass("down"); rotate=!rotate }) 

 div{ position:absolute; left:50%; top:50%; background-color:red; width:100px; height:100px; transition: transform 1s; transform:translate(-50% , -50%); } div.down{ transform: translate(-50% , -50%) rotate(180deg) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div></div> 

也许是这样的！

Answer 2

// this is the variable I want to change 
var flag;

$(".outer_rotate_aero").click(function() {
  $(".outer_rotate_aero_fa1").toggleClass("down");
  flag = false;
});

// Event handlers should not be nested
$(".rotate_aero1").click(function() {
  flag = true;
  $(".fa2").toggleClass("down");
});

/* No need for this block as flag turns true only on click of '.rotate_aero1'
  if (flag == true) {
    $(".fa2").toggleClass("down");
  }
*/

我希望这个答案！

Answer 3

您可以将变量的值设置为与其相反，并在单击时使用切换类。 （见例）

 var rotate = true; $("span").click(function() { // Add or remove class. $(this).toggleClass("rotate-down"); // Updates variable. rotate = !rotate; }); 

 /* These styles are only to make the rotation more pronounced. */ section { display: flex; justify-content: center; align-content: center; padding: 100px 0; } span { display: block; font-size: 30px; width: 60px; height: 60px; padding: 10px; border-radius: 50%; background: hotpink; text-align: center; cursor: pointer; transition: transform .2s ease-in-out; } /* This is the classed being toggled by jQuery. */ .rotate-down { transform: rotate(180deg); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Example element acting as icon. --> <section> <span>🎉</span> </section> 

Answer 4

将javascript onclick给按钮，然后不要切换变量...使用此代码

<img src=" // your image " id="img">
<img src=" // your rotated image " id="imgRotated">

<button onclick="myfn()">Click to rotate</button>

<script>
function myfn(){
document.getElementById("img").style.display = "none";
document.getElementById("imgRotated").style.display = "block";
}
</script>

我希望有所帮助