切換字體真棒圖標

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

看起來您的點擊 function 僅處理單向切換。 也許先檢查當前的 state 然后根據它處理狀態更改？

<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

您的操作始終是“刪除箭頭 class，添加關閉圖標類”。 您應該檢測按鈕的當前class，然后根據此應用特定動作。 例如，您可以像這樣修改代碼：

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