4

我有完整的 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 函数，但似乎无法弄清楚如何从图标播放和图标暂停更改按钮的图标类。

如何以编程方式更改与按钮关联的图标？我也看到了不同的行为——在 chrome 中，图标确实发生了变化，但大小真的很小，而在 Firefox 中，图标没有变化。

或者有没有更好的方法来做到这一点？

4

4 回答 4

2

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

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

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

    play = !play;
}

http://jsfiddle.net/Zxfn8/

于 2013-03-29T16:39:45.470 回答
0

由于引导程序在文档准备好时初始化了一些元素，因此您应该在播放按钮之后有暂停按钮但隐藏：

在播放按钮后添加：

<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;
    }
 }
于 2013-03-29T16:36:24.993 回答
0

您必须选择<i>元素才能更改类。例如像这样：

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

你也有icon-stop并且icon-pause你确实决定了其中之一。

工作小提琴。

而且我认为您不需要$("#playbutton").button('refresh');.

于 2013-03-29T16:29:21.737 回答
-1

在您更改按钮上的图标类的原始代码中，您想要更改<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;
} }

更新小提琴

于 2013-03-29T16:36:47.013 回答