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");

Answer 2

removeClass

之后，fa addClass位于

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);
    }
});

jsFiddle

removeClass

此外，即使您每fa添加fa，addClass也都有fa ...所以应该决定您实际想要如何处理Jurisdiction Value NJ 1 VA 23 IA 5 }。

Answer 3

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

JQuery

3 个答案: