twitter-bootstrap 使用 javascript/bootstrap 时在 onclick 时更改按钮图标

Changing button icon upon onclick when using javascript/bootstrap

提问by Subodh Nijsure

I have complete jsfiddle sample http://jsfiddle.net/snijsure/usg8z/3/

我有完整的 jsfiddle 示例http://jsfiddle.net/snijsure/usg8z/3/

Basically I have javascript function as shown below

基本上我有如下所示的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;
    }
}

I want to toggle a button icon between 'play' and 'pause'. i.e. if user was playing some contents button should be pause and if user was not playing content it should be 'play'.

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

It appears that I have hooked all the javascript function correctly, but can't seem to figure out how to change icon class of button from icon-play & icon-pause.

看来我已经正确地连接了所有的 javascript 函数，但似乎无法弄清楚如何从 icon-play 和 icon-pause 更改按钮的图标类。

How does one change icon associated with a button programmatically? I also see different behavior - in chrome the icon does change but the size is really tiny, whereas in Firefox icon doesn't change.

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

Or is there any better way to do this?

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

回答by Jeff B

You need to modify the class on the ielement. Also, you can do both cases in one go:

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

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

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

    play = !play;
}

http://jsfiddle.net/Zxfn8/

http://jsfiddle.net/Zxfn8/

回答by Marcel Gwerder

You have to select the <i>element to change the class. For example like that:

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

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

Also you have icon-stopand icon-pauseyou have do decide on one of them.

你也有icon-stop并且icon-pause你已经决定其中之一。

Working fiddle.

工作小提琴。

And I think you don't need $("#playbutton").button('refresh');.

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

回答by codelove

Since bootstrap initializes some of the elements when the document is ready you should have the pause button after the play button but hidden:

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

add this after your play button:

在播放按钮后添加：

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

add this in your CSS

在你的 CSS 中添加这个

#pauseButton{display:none;}

and your JS should look like this

你的 JS 应该是这样的

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

回答by RandomWebGuy

In you're original code your changing the icon class on the button, you want to be changing the <i>tag.

在您更改按钮上的图标类的原始代码中，您想要更改<i>标签。

Try this instead:

试试这个：

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

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

更新的小提琴