jQuery触发器单击在第一次单击时不起作用

时间:2018-08-20 12:28:11

标签: javascript jquery

我在使用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();
  });

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

分别维护每个按钮的状态。因此,您可以使用带有“ 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();

  });

希望它可以帮助您获得最佳解决方案。