切换字体真棒图标

Question

Right now, the button has an arrow icon. When onclick is triggered, it switches to the "x" icon, but then I click it again, nothing happens. Can anybody tell me what I can do to get it back to the original (arrows) icon when I click on it again? Below is my code.

<button class="button" data-toggle="tooltip" title="Like"><i class="fa fa-arrows-alt"></i></button>


<script>
    $("button").click(function(){
    $(this).find("i").removeClass("fa fa-arrows-alt").addClass("fa fa-close");
});
</script>

Answer 1

Looks like your click function is only handling one-way toggle. Perhaps check for the current state first and then process the state-change based on that?

<script>
    $("button").click(function(){
        // First, check for current state
        if ($(this).find("i").hasClass("fa-arrows-alt")) {
            // Handle "has class fa-arrows-alt"
            $(this).find("i").removeClass("fa-arrows-alt").addClass("fa-close");
        } else {
            // Handle "does not have class fa-arrows-alt"
            $(this).find("i").removeClass("fa-close").addClass("fa-arrows-alt");
        }
    });
</script>

Answer 2

Your action is always "remove arrow class, add close icon class". You should detect the current class of the button, and then apply a specific action according to this. For example, you can modify your code like this:

$("button").click(function() {
    if ($(this).find("i").hasClass("fa-arrows-alt")) {
        $(this).find("i").removeClass("fa-arrows-alt").addClass("fa-close");
    } else if ($(this).find("i").hasClass("fa-close")) {
        $(this).find("i").removeClass("fa-close").addClass("fa-arrows-alt");
    }
});