Question

我刚刚提出了一个提问者申请。有一个Next和Previous函数以及一个带有javascript的按钮，我隐藏并显示问题。

我想从Next和Previous创建一个关键快捷方式，例如：

左箭头 - ＆gt;它将转到上一个问题右箭头 - ＆gt;它会转到下一个问题

以下是我的剧本摘录：

<form>
  <div id="question1" class="cont active"> </ div>
  <div id="question2" class="cont hide"> </ div>
  <div id="question3" class="cont hide"> </ div>
</form>

当我向右箭头按下时，div#question应该隐藏，div#question2应该是活动的，如果我向左箭头移动则相反。我被困了，我找了参考资料，希望有人可以提供帮助。

Answer 1

要捕捉按键，您可以尝试：

document.onkeydown = function(e){

  if(e.key == "ArrowLeft" && e.target == document.body){
    //left arrow
  }
  if(e.key == "ArrowRight" && e.target == document.body){
    //right arrow
  }
}

隐藏您可以使用的元素，例如：

document.getElementById('question1').style.display = "none";

再次显示：

document.getElementById('question1').style.display = "block";

Answer 2

箭头键可以由keydown捕获。

var activeQuestion = 1;
document.addEventListener( 'keydown', function(ev) {
    if( ev.key === "ArrowLeft" && activeQuestion > 1 ){
      hide( 'question' + activeQuestion ); // hide current element
      show( 'question' + --activeQuestion ); // show next element
    }
    else if(  ev.key === "ArrowRight" && activeQuestion < 3  ){
      hide( 'question' + activeQuestion );
      show( 'question' + ++activeQuestion );
    }
} )

function hide ( elementId ){
  let el = document.getElementById(elementId);
  el.className = el.className.replace( 'active', 'hide' );
}
function show( elementId ){
  let el = document.getElementById(elementId);
  el.className = el.className.replace( 'hide', 'active' );
}

这里举例： https://jsfiddle.net/634vma8r/ 点击矩形区域工作，然后按 - ＆gt;和＆lt; - 。

javascript - 如何使用键盘键显示和隐藏元素？

2 个答案: