Js flip/unflip with same button-CodePudding

Hi I want to make a button that first flip the image and then on next click it will unflip it... I tried a lot of methods but didn't work for me..

    $('.button').on("click", function (){ 
$('#image').css("transform","scaleX(-1)");
})

CodePudding user response：

Use a flag variable to keep an record of changes. like

var flipFlag = 0 // initialy unfliped condition
$('.button').on("click", function (){ 
if(flipFlag == 0)
{
  $('#image').css("transform","scaleX(-1)"); // flip form
  flipFlag=1;                                // 1 to say fliped
}
else
{
  $('#image').css("transform","scaleX(0)"); // original form
  flipFlag=0;                               // 0 to say unfliped
}

});

hope this will help you out, Thank you

CodePudding user response：

document.getElementById('flipped')
  .addEventListener('click', event => {
    if(event.target.dataset.flipstate === 'off') {
      event.target.dataset.flipstate = 'on'
      event.target.style.transform = ("scaleX(-1)")
    } else {
      event.target.dataset.flipstate = 'off'
      event.target.style.transform = ("scaleX(1)")
    }
  })

#flipped {
  padding: 10px;
  background: #BADA55;
}

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <img id="flipped" src="https://www.fillmurray.com/g/200/300" alt="Bill Murray" data-flipstate="off">
  </body>
</html>