如何使一个按键分别触发多个事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使一个按键分别触发多个事件相关的知识，希望对你有一定的参考价值。
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;
}
}
但它只是没有发生，我很难过。为啰嗦的帖子道歉。
答案
这将是一个更优雅的解决方案。您可以使用对话线阵列（或对象）以及标记下一行的计数器，而不是巨大的开关块。
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>另一答案
我认为在事件监听器中放置逻辑应该可以解决问题：
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++;
}
});
另一答案
您正在使用相同的事件来执行两个函数。当按下按钮时，jQuery将执行这两个功能。您需要设置计数器并计算事件。
以上是关于如何使一个按键分别触发多个事件的主要内容，如果未能解决你的问题，请参考以下文章