javascript - 如何让一次按键分别触发多个事件

Question

TL;DR:每次用户按下空格键时，我都希望出现下一行对话。

上下文:我最近几周才开始学习编码(首先是基本的 html 和 css，现在是 JS)。我主要使用 freecodecamp 和 YouTube。为了帮助我更有创意地学习，我想我应该开始制作一个基于文本的小游戏(以 BOTW 为主题，因为这是我最喜欢的实际游戏)。对于我想稍后实现的事情，我有各种各样的想法，但我在早期有点停滞不前。

问题:在游戏开始时，我想在每次用户按下空格键时将一些对话添加到文档中。基本代码如下所示:

$(document).keyup(function(e) {
  if (e.which == 32) {
    $('#gameText').append("<h2>It sounds familiar...</h2>");
  }
});

$(document).keyup(function(e1) {
  if (e1.which == 32) {
    $('#zelda').append("<h3>Link...</h3>");
  }
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<h1> You hear an faint, incorporeal voice, carried by the wind... </h1>
<script>
  function(e)
</script>
<h2 id="gameText"></h2>
<h3 id="zelda"></h3>
<p> Press <b>space</b> to continue</p>

问题是按一下空格键会同时触发所有的 .keyup 事件；而我想一次将几行放在一起。

我尝试了几种不同的想法，例如创建一个数字变量，并在每次按键时递增它，然后使用 switch 语句选择每一行对话。

let spacecount = 0;
while (spacecount < 10) {
  $(document).keyup(function(e) {
    if (e.which == 32) {
      spacecount++;
    }
  });

  switch (spacecount) {
    case 1:
      $('#gameText').append("<h2>It sounds familiar...</h2>");
      break;
    case 2:
      $('#zelda').append("<h3>Link...</h3>");
      break;
  }
}

但这并没有发生，我很困惑。为冗长的帖子道歉。

Answer 1

这将是一个更优雅的解决方案。您可以使用一个对话行数组(或对象)和一个计数器来标记您的下一行，而不是巨大的开关 block 。

const dialogue = [
    ["#gameText", "<h2>It sounds familiar...</h2>"],
    ["#zelda", "<h3>Link...</h3>"]
];

let counter = 0;

$(document).keyup(function(e) {
    if (e.which == 32) {
      if (counter >= dialogue.length)
        return;

      $(dialogue[counter][0]).append(dialogue[counter][1]);
      counter++; 
    }
});

<div id="gameText"></div>
<div id="zelda"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>