jQuery觸發器單擊在第一次單擊時不起作用

Question

我在使用jquery觸發單擊時遇到麻煩。 我需要通過點擊觸發來播放音頻標簽中的音頻。 當我第一次單擊第一個元素時，它起作用，但是如果我單擊另一個元素，則第一次單擊不起作用。 如果我單擊第二次，它將起作用。

  var Audioplaying = false;
  jQuery('.playAudio').click(function(e) {

        var playerID = jQuery(this).next('.audioPlayer').attr('id');
        var playerBTN = jQuery(this);

        if (Audioplaying == false) {
            Audioplaying = true;
            jQuery("#"+playerID)[0].play();
            playerBTN.addClass('play');
        } else {
            Audioplaying = false;
            jQuery("#"+playerID)[0].pause();
            playerBTN.removeClass('play');
        }
        e.preventDefault();
  });

Answer 1

變量Audioplaying是共享的，它不是唯一的，因此您可能希望每個元素唯一。 因此，請使用data()跟蹤每個玩家的狀態。

jQuery('.playAudio').click(function(e) {

    var player = jQuery(this).next('.audioPlayer');
    var playerID = player.attr('id');
    var playerState = player.data('isPlaying') || false; // get if it is running
    player.data('isPlaying', !playerState);  // update the boolean
    var playerBTN = jQuery(this);

    if (!playerState) {
        jQuery("#"+playerID)[0].play();
        playerBTN.addClass('play');
    } else {
        jQuery("#"+playerID)[0].pause();
        playerBTN.removeClass('play');
    }
    e.preventDefault();
});

Answer 2

分別維護每個按鈕的狀態。 因此，您可以使用帶有“ id”作為鍵的對象。

例如：{button_id：true / false}

  var Audioplaying = {};
  jQuery('.playAudio').click(function(e) {

        var playerID = jQuery(this).next('.audioPlayer').attr('id');
        var playerBTN = jQuery(this);

        if (!Audioplaying[playerID]) {
            Audioplaying[playerID] = true; // every button has it's own state maintained in the object.
            jQuery("#"+playerID)[0].play();
            playerBTN.addClass('play');
        } else {
            Audioplaying[playerID] = false;
            jQuery("#"+playerID)[0].pause();
            playerBTN.removeClass('play');
        }
        e.preventDefault();

  });

希望它可以幫助您找到最佳解決方案。