<span>一旦“ keypress”更改了所选<span>元素</span>的类，则将</span> “ keypress” function（）应用到下一个<span><span>元素</span></span>
[英]Apply 'keypress' function() to next <span> element once the 'keypress' has changed the class of the selected <span> element
问题描述
I have taken a string and created a <span> for each letter in the string. 
我已获取一个字符串，并为该字符串中的每个字母创建了一个<span> 。 My goal is to iterate through the spans, take into account the keypress feed back and determine if the keypress is 'correct' or 'incorrect'. 我的目标是遍历跨度，考虑按键的反馈并确定按键是“正确”还是“错误”。 Once the appropriate class has been assigned, I would like to preform the same keypress function on the next span element. 一旦分配了适当的类，我想在下一个span元素上执行相同的按键功能。 I can't figure out how to move to the second span. 我不知道如何移动到第二个跨度。 The class applies, but any additional key feedback continues to apply to the first <span> element 该类适用，但是任何其他键反馈仍继续适用于第一个<span>元素
example: <span>e</span> <span>x</span> <span>a</span> <span>m</span> <span>p</span> <span>l</span> <span>e</span> 例如： <span>e</span> <span>x</span> <span>a</span> <span>m</span> <span>p</span> <span>l</span> <span>e</span>
window.addEventListener('keypress', function(event){
var $current = document.querySelector('span')
var $next = document.querySelector('span').nextSibling
if ($activeChar === event.key) {
$current.classList.remove('current')
$current.classList.add('right')
} else {
$current.classList.remove('current')
$current.classList.add('wrong')
}
return $next.classList.add('current')
})
I am very new to Javascript and I apologize in advance for my lack of understanding, but I want to learn. 我是Java语言的新手，由于缺乏理解，我先向您道歉，但我想学习。 I have referenced the JS books that I have and searched high and low. 我参考了我所拥有的JS书籍，并进行了上下搜索。 I haven't found a solution that I am able to implement on my own. 我还没有找到自己能够实现的解决方案。 Many thanks 非常感谢
2 个解决方案
解决方案1
0 已采纳 2017-06-10 20:07:04
instead of defining the keypresses inside of the event listener take the following for a spin: 而不是在事件侦听器中定义按键，请旋转以下内容：
var out = document.getElementById("output"); document.onkeydown = function(e){ if(e.keyCode == 65) out.innerHTML = "a"; if(e.keyCode == 66) out.innerHTML = "b"; if(e.keyCode == 67) out.innerHTML = "c"; };
<body> <span id="output">press either the a, b, or c key</span> </body>
the following uses e.keyCode which is fancy for "key value". 下面使用e.keyCode ，它很适合“键值”。 I find this much easier to do and if you need a list just look at this keycode info 我发现这更容易实现，如果您需要列表，请查看此键码信息
For you're purpose: 为了您的目的：
var out = document.getElementById("output"); var subedKey; var chosenKey; function start(){ var rand = Math.floor(Math.random() * 3 + 1); switch(rand){ case 1: chosenKey = "a"; out.innerHTML = "press the a key"; break; case 2: chosenKey = "b"; out.innerHTML = "press the b key"; break; case 3: chosenKey = "c"; out.innerHTML = "press the c key"; break; default: console.log("no key was chosen"); }; } start(); document.onkeydown = function(e){ if(e.keyCode == 65){ out.innerHTML = "a"; subedKey = "a";} if(e.keyCode == 66){ out.innerHTML = "b"; subedKey = "b";} if(e.keyCode == 67){ out.innerHTML = "c"; subedKey = "c";} if(subedKey == chosenKey){ out.innerHTML = "correct"; }else{ out.innerHTML = "incorrect"; } window.setTimeout(start, 2000); };
<body> <span id="output">the letter is:</span> </body>
解决方案2
0 2017-06-10 20:11:06
You had a few problems with your code. 您的代码有一些问题。
First, you would have always selected the first element, and not the current one, so I added a class to your span, and select by it. 首先，您将始终选择第一个元素，而不是当前元素，因此我在您的跨度中添加了一个类，然后选择它。 Second, you're not defining $activeChar Third, nextSibling won't return what you expect. 其次，您没有定义$activeChar第三， nextSibling将不会返回您期望的结果。 nextElementSibling will nextElementSibling将
window.addEventListener('keypress', function(event) { var $current = document.querySelector('span.current') var $next = $current.nextElementSibling var $activeChar = $current.innerText if ($activeChar === event.key) { $current.classList.remove('current') $current.classList.add('right') } else { $current.classList.remove('current') $current.classList.add('wrong') } return $next.classList.add('current') })
.current { background-color: blue; } .right { background-color: green; } .wrong { background-color: red; }
<span class='current'>e</span> <span>x</span> <span>a</span> <span>m</span> <span>p</span> <span>l</span> <span>e</span>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.