单击 keydown 上的 active li href

Question

我正在使用代码为 javascript 游戏制作一个简单的角色 select 屏幕。可以将鼠标悬停在每个角色上并单击以转到特定版本的游戏。我正在尝试使它们 select 也可以使用键盘键，以便它们可以映射到街机控制器。箭头指向 select 并且回车键将转到 link 但是我现在的代码总是在按键时转到相同的 link，无论哪个字符是 'active'.

如何在按下 enter 键时转到活动 li 项目的 link？

这是我当前的代码。

代码

$(document).ready(function () {
 var vehicleIndex = 1;

 function activeVehicle(index) {
  var selector = "#t-" + index;
  $('.active').removeClass('active');
  $(selector).addClass('active');
 }
 window.onkeyup = function (e) {
  var code = e.which;
  if (code == 39) {
   if (vehicleIndex < 5) vehicleIndex++;
  } //up
  if (code == 37) {
   if (vehicleIndex > 1) vehicleIndex--;
  } //down

  activeVehicle(vehicleIndex);
 };
});

$(document.body).on('keydown', function (e) {
 if (e.keyCode == 13) {
  window.location = $('.clickme').attr('href');
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h3>SELECT YOUR VEHICLE</h3>
  <br>
  <ul id="SelectJeep">
    <a href="link1.html" 
    class="clickme">                                            
      <li id="t-1" class="active">
        <h1>MANCHE</h1>
      </li>
    </a>
    <a href="link2.html" class="clickme">
      <li id="t-2">
        <h1>ASCENDER</h1>
      </li>
    </a>
    <a href="link3.html" class="clickme">
      <li id="t-3">
        <h1>CRUSADER</h1>
      </li>
    </a>
    <a href="link4.html" class="clickme">
      <li id="t-4">
        <h2>COMING SOON</h2>
      </li>
    </a>
  </ul>
</div>

Answer 1

   if (e.keyCode == 13) {
        window.location = $('.clickme').attr('href');
    }

=>

if (e.keyCode == 13) {
        window.location = $('.active').parent().attr('href');
}

单击 keydown 上的 active li href

Click active li href on keydown

javascript

href

keydown

html-lists