时间戳

首页 > 解决方案 > 如何让一个按键分别触发多个事件

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

问题描述

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;
  }
}

但它只是没有发生，我很难过。为冗长的帖子道歉。

标签： javascriptjqueryhtml

解决方案

我认为将逻辑放在事件侦听器中应该可以解决问题：

let spacecount = 0;

$(document).keyup(function(e) {
    if (spacecount < 10 && e.which == 32) {
        switch (spacecount) {
            case 1:
              $('#gameText').append("<h2>It sounds familiar...</h2>");
              break;
            case 2:
              $('#zelda').append("<h3>Link...</h3>");
              break;
        }

        spacecount++;
    }
});

推荐阅读