字体真棒类fa没有添加JQuery

Question

我有一个按钮,我希望HTML和font-awesome图标在奇数次点击时更改,并恢复偶数次点击.

例如,我有一个名为的按钮mute.如果用户点击该按钮,我希望html更改为unmute和要替换的font-awesome类.如果用户再次单击该按钮,我希望按钮恢复为mute依此类推,依此类推.

此代码应该有效,它确实会更改URL和类.但它没有添加字体 - 真棒初始化类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

问题是你在添加后立即用removeClass方法删除fa类.改为:

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