Изменение значка кнопки на OnClick при использовании JavaScript/начальной загрузки

Question

У меня есть полный jsfiddle образец http://jsfiddle.net/snijsure/usg8z/3/

В принципе у меня есть функция яваскрипта, как показано ниже

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, но не могу понять, как изменить класс значков кнопки из значка-play & icon-pause.

Как изменить значок, связанный с кнопкой программно? Я также вижу другое поведение - в хром значок меняется, но размер действительно крошечный, в то время как значок Firefox не изменяется.

Или есть ли лучший способ сделать это?

Answer 1

Чтобы изменить класс, вам необходимо выбрать элемент <i>. Например, как, что:

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

Также у вас есть icon-stop и icon-pause у вас есть все-таки решили на одном из них.

Working fiddle.

И я думаю, что вам не нужно $("#playbutton").button('refresh');.

Answer 2

Поскольку бутстрапе инициализирует некоторые из элементов, когда документ будет готов, вы должны иметь кнопку паузы после нажатия на кнопку воспроизведения, но скрытых:

добавить это после того, как ваша кнопка воспроизведения:

<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 3

В исходном коде вы меняете класс значка на кнопке, вы хотите изменить тег <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

Answer 4

Вам нужно изменить класс на i элемента. Кроме того, вы можете сделать оба случая на одном дыхании:

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

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

    play = !play; 
} 

http://jsfiddle.net/Zxfn8/