字体很棒 class fa 未添加 JQuery

Question

我有一个按钮，我希望 HTML 和很棒的字体图标在奇数次点击时改变，在偶数次点击时恢复原状。

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

这段代码应该可以工作，它确实改变了 URL 和 class。但它没有添加超赞的字体初始化 class fa.

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

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

使用 JQuery 的 addClass 方法，您可以添加多个 class，方法是用 space 分隔它们。基于此，元素应该是this

<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 class 没有被添加。

Answer 1

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

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

Answer 2

你是 removeClass，在 addClass

之后有 fa

jsFiddle

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

此外，removeClass 都有 fa，即使你每 addClass 添加 fa... 所以应该决定你实际想如何处理 fa.

Answer 3

删除 class，然后添加 class。交换两个方法在静音或取消静音中的位置

字体很棒 class fa 未添加 JQuery

Font-awesome class fa is not being added with JQuery

javascript

jquery

html

font-awesome

addclass