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

看起来您的点击功能仅处理单向切换。也许先检查当前状态，然后根据该状态处理状态更改？

<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

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

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

切换字体真棒图标

2 个答案: