如何切換按鈕的onclick =“ function”

Question

我有一個播放和停止視頻的按鈕。 如何有效地在.play（）和.pause（）之間切換？

<button id="thebutton" onclick="BV.getPlayer().play();"></button>

Answer 1

首先，我建議不要使用內聯事件處理程序。 如果您使用的是jQuery，那么我建議您使用它。

每次單擊后，設置一個變量以告知其是否正在播放，然后觸發正確的操作。

$(function(){
    $('#thebutton').click(function(){
        var isPlaying = $(this).data('isplaying');

        if(isPlaying){
            BV.getPlayer().pause();
        }
        else{
            BV.getPlayer().play();
        }

        $(this).data('isplaying', !isPlaying);
    });
});

_{jQuery曾經有一個.toggle() “事件” ，但已被刪除。}

Answer 2

添加一個類來檢查玩家狀態。 然后使用此代碼。

$("#theButton").click(function() {
    if($(this).hasClass('playing')) {
        BV.getPlayer().pause();   
    } else {
        BV.getPlayer().play();
    }
    $(this).toggleClass('playing')
})

Answer 3

$('#thebutton').click(function() {

if ($(this).val() == "play") {
  $(this).val("pause");
  play_int();
}

else {
  $(this).val("play");
 play_pause();
 }         
});

要么

 $(function(){
$('#play').click(function() {
   // if the play button value is 'play', call the play function
   // otherwise call the pause function
   $(this).val() == "play" ? play_int() : play_pause();
});
});

function play_int() {
$('#play').val("pause");
// do play
}

function play_pause() {
$('#play').val("play");
// do pause
}

aka jQuery切換按鈕值

Answer 4

var isPlaying = false;
var player = BV.getPlayer();
$("#thebutton").click(function() {
    if (isPlaying) {
        player.pause();
        isPlaying = false;
    } else {
        player.play();
        isPlaying = true;
    }
});