Trato de mover el color verde flotante en los botones, con las cuatro teclas de flecha en el teclado. Lo que pasa es que no se mueve con normalidad. Lo que quiero es lo siguiente:
del HTML.Quiero que el color verde vaya en todas las direcciones dependiendo del botón que presione. por ejemplo, si está en 1 y presiona hacia abajo, vaya a 4. Si está en 1 y presione hacia la derecha para ir a 2. Si está en 2 y presione hacia la izquierda, vaya a 1, etc.
Los códigos clave son: Izquierda: 37, Derecha: 39, Arriba: 38, Abajo: 40
¿Cómo puede hacerse esto? ¡¡¡Muchas gracias!!!
var button = $('button'); var buttonSelected; $(window).keydown(function(e) { if (e.which === 40) { if (buttonSelected) { buttonSelected.removeClass('selected'); next = buttonSelected.next(); if (next.length > 0) { buttonSelected = next.addClass('selected'); } else { buttonSelected = button.eq(0).addClass('selected'); } } else { buttonSelected = button.eq(0).addClass('selected'); } } else if (e.which === 38) { if (buttonSelected) { buttonSelected.removeClass('selected'); next = buttonSelected.prev(); if (next.length > 0) { buttonSelected = next.addClass('selected'); } else { buttonSelected = button.last().addClass('selected'); } } else { buttonSelected = button.last().addClass('selected'); } } }); button.selected { background: green } .all button { border: 1px solid blue; color: #222; padding: 10px 25px; cursor: pointer; } .all button:hover { background-color: orange; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="all"> <button>One</button> <button>Two</button> <button>Three</button> </div> <div class="all"> <button>Four</button> <button>Five</button> <button>Six</button> </div> <div class="all"> <button>Seven</button> <button>Eight</button> <button>Nine</button> </div>Esta es mi solución personal. He dividido conceptualmente todo en filas y columnas.
var indexCol = 0; var indexRow = 0; var $rows = $('.all'); var buttonSelected; var arrow = { left: 37, up: 38, right: 39, down: 40 }; $(window).keydown(function(e) { if (Object.values(arrow).indexOf(e.which) > -1) { e.preventDefault(); $('.all button').removeClass('selected'); switch (e.which) { case arrow.up: indexRow = indexRow == 0 ? $rows.length - 1 : indexRow - 1; break; case arrow.down: indexRow = indexRow == $rows.length - 1 ? 0 : indexRow + 1; break; case arrow.left: $buttonsInRow = $('.all:eq(' + indexRow + ') button'); indexCol = indexCol == 0 ? $buttonsInRow.length - 1 : indexCol - 1; break; case arrow.right: $buttonsInRow = $('.all:eq(' + indexRow + ') button'); indexCol = indexCol == $buttonsInRow.length - 1 ? 0 : indexCol + 1; break; } buttonSelected = $('.all:eq(' + indexRow + ') button:eq(' + indexCol + ')'); buttonSelected.addClass('selected'); } }); button.selected { background: green } .all button { border: 1px solid blue; color: #222; padding: 10px 25px; cursor: pointer; } .all button:hover { background-color: orange; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="all"> <button>One</button> <button>Two</button> <button>Three</button> </div> <div class="all"> <button>Four</button> <button>Five</button> <button>Six</button> </div> <div class="all"> <button>Seven</button> <button>Eight</button> <button>Nine</button> </div>Esto se puede hacer asumiendo una cuadrícula de la siguiente manera:
1 2 3
4 5 6
7 8 9
Elijamos 5 como punto de partida.
También tenemos que manejar casos fuera de rango:
El siguiente es un código de trabajo para el mismo:
$(window).keydown(function(e) { // remove the old active let buttonSelected = document.querySelector(".selected"); buttonSelected.classList.remove("selected"); let buttonId = parseInt(buttonSelected.id[2]); var newId = 0; if (e.which === 40) { // go down console.log(40, "down"); newId = buttonId + 3; } else if (e.which === 38) { // go up console.log(38, "up"); newId = buttonId - 3; } else if (e.which == 37) { // go left console.log(37, "left"); newId = buttonId - 1; } else if (e.which === 39) { // go right console.log(39, "right"); newId = buttonId + 1; } // adjust when out of range if (newId <= 0) { newId = newId + 9; } if (newId > 9) { newId = newId - 9; } // set the next active let nextItem = "#b-" + newId.toString(); let newSelected = document.querySelector(nextItem); newSelected.classList.add("selected"); }); button.selected { background: green; } .all button { border: 1px solid blue; color: #222; padding: 10px 25px; cursor: pointer; } .all button:hover { background-color: orange; } <body> <div class="all"> <button id="b-1" class="selected">One</button> <button id="b-2">Two</button> <button id="b-3">Three</button> </div> <div class="all"> <button id="b-4">Four</button> <button id="b-5">Five</button> <button id="b-6">Six</button> </div> <div class="all"> <button id="b-7">Seven</button> <button id="b-8">Eight</button> <button id="b-9">Nine</button> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body>