Я использую код для создания простого экрана выбора персонажа для игры на JavaScript.На каждого персонажа можно навести курсор мыши и щелкнуть мышью, чтобы перейти к определенной версии игры.Я пытаюсь сделать их выбираемыми с помощью клавиш клавиатуры, чтобы их можно было сопоставить с контроллером аркады.Стрелки работают для выбора, и клавиша ввода будет переходить по ссылке, но код, который у меня теперь есть, всегда идет по одной и той же ссылке при нажатии клавиши, независимо от того, какой символ является «активным».
Как перейти кссылка активного элемента li при нажатии клавиши ввода?
Вот мой текущий код.
КОД
$(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>