Question

有两个标签，我希望它们在点击时旋转。我使用了JQuery，但只在第一次点击时才有效！如何让它在每次点击时都能正常工作？

＆＃13;

$(document).ready(function() {
  $(document).on("click", "#male", function() {
    $('#male i').css({
      'transform': 'rotate(360deg)'
    })
  })
});

＆＃13;

#male i,
#female i {
  transition: 1s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<label id="male" class="pull-left text-center col-md-5 btn btn-default" style="height: 36px;">
  <i class="fa fa-2x fa-male text-center" style="color: tomato">
  <input type="radio" name="gender" value="male" checked>
  </i>
</label>
<label id="female" class="pull-right text-center col-md-5 btn btn-default" style="height: 36px;">
  <i class="fa fa-2x fa-female text-center" style="color: purple">
  <input type="radio" name="gender" value="female">
  </i>
 </label>

＆＃13;

Answer 1

maleRotation = 0;
$(document).on("click", "#male", function () {
        maleRotation+= 360;
        $('#male i').css({
            'transform': 'rotate('+maleRotation+'deg)'
        })
    })

Jquery-添加css onclick只能在第一次点击时工作

1 个答案: