jquery - 按热键跳过 li 不工作 jquery

Question

我有一个代表在线考试的 li 安排。

如果学生单击随机 li，并且不知道答案，他可以通过单击相应的 li 或仅按其中的数字 5 跳至下一个问题 (li)。键盘。

这是我迄今为止编写的代码。

问题

我需要检测当前打开的li(聚焦输入)，如果按键盘上的数字5，则跳到下一个li并打开它以在其中工作

	
$("li").on("click",function(){
 $("li").find("input").hide();
$(this).find("input").show().focus();

});


var body = $('body');

    body.keypress( function (e) {
		
    var li =  $(document).find('ul.list li');

    
	
	if ( e.which == 53 ) {
		//alert()
		li.find("input").next().show();
	}
	
	
	
	
});

li input{display:none;}
li{cursor:pointer;border:1px solid red;margin:5px;padding:10px;}

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

<ul class='list'>

<li>a <input value='' /></li>
<li>b <input value='' /></li>
<li>c <input value='' /></li>
<li>d <input value='' /></li>
<li>e <input value='' /></li>
<li>f <input value='' /></li>

</ul>

Answer 1

您可以使用document.activeElement来获取事件的input元素。获取 input 实例后，使用 closest() 获取 li 并使用 next() 移动到下一个li。

$("li").on("click", function() {
  $("li").find("input").hide();
  $(this).find("input").show().focus();

});

$('body').keypress(function(e) {

  if (e.which == 53) {
    e.preventDefault();

    let li, input;
    if (document.activeElement.tagName == "BODY") {
      input = $('li input').first();
    } else {
      li = $(document.activeElement).closest('li');
      input = li.next().find("input");
    }

    input.show();
    input.focus();
  }
});

li input {
  display: none;
}

li {
  cursor: pointer;
  border: 1px solid red;
  margin: 5px;
  padding: 10px;
}

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

<ul class='list'>

  <li>a <input value='' /></li>
  <li>b <input value='' /></li>
  <li>c <input value='' /></li>
  <li>d <input value='' /></li>
  <li>e <input value='' /></li>
  <li>f <input value='' /></li>

</ul>