Question

我还在制作一个音乐播放器，已经分配了鼠标控件，但是我在PLAY / PAUSE按钮上的键盘事件遇到了一些麻烦。

到目前为止，我让用户能够通过按空格键“点击”PLAY按钮。发生的事情是PLAY按钮被隐藏并被PAUSE按钮取代。

我现在想要的是让用户能够再次按空格键，以便“点击”暂停，因此再次显示播放。

这就是我所拥有的：

HTML

<div>

            <a href="#" id="play"> </a> 

            <a href="#" id="pause" style="display: none;"></a>

</div>

脚本

<script>

/* mouse */

    $('#play').on('click', function(event) {
        console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#pause').show();
    $('#play').hide();

    $('#pause').on('click', function(event) {
    //currentPlayingTrack.pause();

    $('#pause').hide();
    $('#play').show();
    });

/* keyboard */

var play = document.getElementById("play");
var pause = document.getElementById("pause");


document.onkeydown = function (e) {
    if (e.keyCode == 32) {
        play.click();
    }
    else if(e.keyCode == 32) {
        pause.click();
    }
}; 


    </script>

我错过了什么？

Answer 1

错误就在这里：

document.onkeydown = function (e) {
  if (e.keyCode == 32) {
    play.click();
  } else if(e.keyCode == 32) {
    pause.click();
  }
};

第二个条件无法执行，因为每当keyCode为32时，它只在第一个条件下运行。你可以声明一个变量＆＃34; isPlaying＆＃34;这表明玩家是否在玩游戏。

var isPlaying = false;
document.onkeydown = function (e) {
 if (e.keyCode == 32) {
  if (isPlaying) {
    pause.click();
  } else {
    play.click();
  }
  isPlaying = !isPlaying; // if true equal false, if false equal true
 }
};

Answer 2

第一个错误是你没有关闭所有括号，第二个是代码的这一部分：

if (e.keyCode == 32) {
    play.click();
}
else if(e.keyCode == 32) {
    pause.click();
}

我建议使用变量来检查按钮播放是否被按下：

 var ispaused = true;
 var play = document.getElementById("play");
var pause = document.getElementById("pause");
 $('#play').on('click', function(event) {
 ispaused = false;
        console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#pause').show();
    $('#play').hide();

/* keyboard */




});
    $('#pause').on('click', function(event) {
    ispaused = true;
    //currentPlayingTrack.pause();

    $('#pause').hide();
    $('#play').show();
    });

    document.onkeydown = function (e) {
    if (e.keyCode == 32) {
    if(ispaused == true ){
        play.click();
        }else{
        pause.click();
        }
    }

};

fiddle

Answer 3

有效。你在任何时候进行空格时都会仔细检查空格键码，每次第一个条件都是真的。

其次，您需要使用$ bla代替$（＆＃34; #blablabla＆＃34;）。它运行近600行代码，每次都选择查找对象。所以不要让重复工作。

最后，$（）是喜欢$（doucument）.ready（）。这一切都是在完成渲染时完成的，而且DOM已经完成了。就是这样！

**代码**

$(function () {
  let $play = $("#play");
  let $pause = $("#pause");
  $play.on('click', function (event) {
    console.log('play click clicked');
    //currentPlayingTrack.play();
    $pause.show();
    $play.hide();
  });
  $pause.on('click', function (event) {
    //currentPlayingTrack.pause();
    $pause.hide();
    $play.show();
  });

  /* keyboard */

  document.onkeydown = function (e) {
    if (e.keyCode == 32) {
      toggle = !toggle;
      $play.trigger("click");
    }
    else if (e.keyCode == 32) {
      toggle = !toggle;
      $pause.trigger("click");
    }
  };
});

Answer 4

好像你已经错过了一些随时间推移的js知识:)这里有一个关于我如何实现这个目标的代码。

http://codepen.io/smplejohn/pen/zNVbRb

<a href="#" class="playpause">Play</a> 
<a href="#" class="playpause" style="display:none">Pause</a>

$('.playpause').click(function(){
  $('.playpause').toggle();
  return false;
});

document.onkeydown = function (e) {
  if (e.keyCode == 32){     
    $('.playpause').toggle();
  }
};

Javascript播放/暂停按钮键盘事件

4 个答案: