javascript - 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();
});