Javascript 切换字体图标

现在，按钮有一个箭头图标。当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>

$（“按钮”）。单击（函数（）{
$（this.find（“i”）.removeClass（“fa-fa-arrows-alt”）.addClass（“fa-fa-close”）；
});

看起来您的单击功能只处理单向切换。也许先检查当前状态，然后在此基础上处理状态更改

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

$（“按钮”）。单击（函数（）{
//首先，检查当前状态
if（$（this.find（“i”）.hasClass（“fa-arrows-alt”））{
//句柄“具有类fa箭头alt”
$（this）.find（“i”）.removeClass（“fa-arrows-alt”）.addClass（“fa-close”）；
}否则{
//句柄“没有类fa箭头alt”
$（this）.find（“i”）.removeClass（“fa close”）.addClass（“fa arrows alt”）；
}
});

您的操作始终是“删除箭头类，添加关闭图标类”。您应该检测按钮的当前类，然后根据该类应用特定操作。例如，您可以如下方式修改代码：

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

---

您应该使用toggleClass，这将添加不在元素上的类，并在元素存在时将其删除。