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

Changing button icon upon onclick when using javascript/bootstrap

本文关键字：按钮 图标 onclick javascript bootstrap 使用      更新时间：2023-09-26

我有完整的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;
    }
}

我想在"播放"answers"暂停"之间切换按钮图标。例如，如果用户正在播放一些内容，按钮应该是暂停，如果用户没有播放内容，它应该是"播放"。

看来我已经钩住了所有的javascript函数正确，但似乎不能弄清楚如何改变图标类按钮从icon-play &icon-pause。

如何以编程方式更改与按钮关联的图标?我也看到了不同的行为——在chrome中图标会改变，但是尺寸很小，而在Firefox中图标不会改变。

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

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

function playButtonPress() {
    $("#playbutton i").toggleClass("icon-stop icon-play");
    console.log("playButton pressed play was "+play);
    play = !play;
}
http://jsfiddle.net/Zxfn8/

您必须选择<i>元素来更改类。例如:

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

还有icon-stop和icon-pause，你必须选择其中一个。

工作小提琴。

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

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

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

更新小提琴

相关文章：