javascript - Font-awesome 类 fa 没有被添加到 JQuery 中

Question

我有一个按钮，我希望它的 HTML 和超赞字体图标在奇数次点击时更改，并在偶数次点击时恢复原状。

例如，我有一个名为mute 的按钮。如果用户单击按钮，我希望 html 更改为 unmute 并替换 font-awesome 类。如果用户再次点击该按钮，我希望该按钮恢复为 mute 等等。

这段代码应该可以工作，它确实会更改 URL 和类。但它并没有添加 font-awesome 初始化类 fa。

当我检查元素时，我得到了这个

<button id="mute" class="btn btn-primary fa-volume-off"> Mute</button>

使用 JQuery 的 addClass 方法，您可以通过用空格分隔它们来添加多个类。基于此，元素应该是这个

<button id="mute" class="btn btn-primary fa fa-volume-off"> Mute</button>

这是我的代码

var clicks = 0;
    $("#mute").click(function() {
            clicks += 1;
            if (clicks % 2 === 1) {
                    $(this).html(" Un-mute");
                    $(this).addClass("fa fa-volume-up");
                    $(this).removeClass("fa fa-volume-off");
                    apiswf.rdio_setVolume(0);
            }
            else {
                $(this).html(" Mute");
                $(this).addClass("fa fa-volume-off");
                $(this).removeClass("fa fa-volume-up");
                apiswf.rdio_setVolume(100);
            }
    });

我不明白为什么没有添加 fa 类。

Answer 1

问题是您在添加 fa 类后立即使用 removeClass 方法将其删除。更改为:

$(this).removeClass("fa-volume-off");