Question

我有完整的jsfiddle样本http://jsfiddle.net/snijsure/usg8z/3/

基本上我有javascript函数，如下所示

function playButtonPress() {

    if (play == false) {
        $("#playbutton").removeClass("icon-play").addClass("icon-stop").button('refresh');

        console.log("playButton pressed play was false show pause button");
        play = true;
    } else {
        $("#playbutton").removeClass("icon-pause").addClass("icon-play").button('refresh');
        console.log("playButton pressed play was true show play button");
        play = false;
    }
}

我想在“播放”和“暂停”之间切换按钮图标。即如果用户正在播放某些内容按钮应暂停，如果用户没有播放内容则应该是“播放”。

看来我已正确挂钩了所有的javascript功能，但似乎无法弄清楚如何从icon-play＆amp;更改按钮的图标类。图标暂停。

如何以编程方式更改与按钮关联的图标？我也看到了不同的行为 - 在chrome中，图标确实发生了变化但尺寸非常小，而在Firefox中图标不会改变。

或者有更好的方法吗？

Answer 1

您需要修改i元素上的类。此外，您可以一次完成两种情况：

function playButtonPress() {
    $("#playbutton i").toggleClass("icon-stop icon-play");

    console.log("playButton pressed play was "+play);

    play = !play;
}

http://jsfiddle.net/Zxfn8/

Answer 2

您必须选择<i>元素才能更改班级。例如：

$("#playbutton i").removeClass("icon-play").addClass("icon-stop");

您还可以icon-stop和icon-pause决定其中一个。

Working fiddle。

我认为你不需要$("#playbutton").button('refresh');。

Answer 3

由于bootstrap在文档准备就绪时初始化了一些元素，因此你应该在播放按钮之后有一个暂停按钮但是隐藏了：

在播放按钮后添加：

<button type="button" id="pauseButton" class="btn" onclick='playButtonPress()'><i class="icon-pause"></i></button>

在CSS中添加

#pauseButton{display:none;}

你的JS应该是这样的

  function playButtonPress() {
    if (!play) {
      $("#playbutton").hide();
      $("#pauseButton").show();
      play = true;
    } else {
      $("#pauseButton").hide()
      $("#playbutton").show();
      play = false;
    }
 }

Answer 4

如果您是原始代码，则更改按钮上的图标类，您希望更改<i>代码。

请改为尝试：

function playButtonPress() {
if (play == false) {
    $("#playbutton i").removeClass("icon-play").addClass("icon-pause");

    console.log("playButton pressed play was false show pause button");
    play = true;
} else {
    $("#playbutton i").removeClass("icon-pause").addClass("icon-play");
    console.log("playButton pressed play was true show play button");
    play = false;
} }

Updated Fiddle

使用javascript / bootstrap时，在onclick上更改按钮图标

4 个答案: