Переключение шрифта Awesome Icons

Question

Прямо сейчас у кнопки есть значок стрелки. Когда срабатывает onclick, он переключается на значок «x», но затем я нажимаю его снова, ничего не происходит. Кто-нибудь может сказать мне, что я могу сделать, чтобы вернуть его к исходному значку (стрелки), когда я снова нажму на него? Ниже мой код.

<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

Ваше действие всегда "удалить класс стрелки, добавить значок закрытия класса". Вы должны определить текущий класс кнопки, а затем применить определенное действие в соответствии с этим. Например, вы можете изменить свой код следующим образом:

$("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");
    }
});

Answer 2

Похоже, ваша функция щелчка обрабатывает только одностороннее переключение. Возможно, сначала проверить текущее состояние, а затем обработать изменение состояния на основании этого?

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