Jquery-添加css onclick只在第一次點擊時工作

Question

有兩個標籤，我希望他們旋轉點擊。我用JQuery來做到這一點，但它只適用於第一次點擊！ 我怎樣才能使它在每次點擊上都有效？

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

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

<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>

Answer 1

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