鍵碼/按鈕組上、下、左、右移動

Question

我嘗試使用鍵盤上的四個箭頭鍵移動按鈕上的綠色懸停顏色。 問題是它不能正常移動。 我想要的是以下內容：

1. 按右，綠色向右。
2. 按向左，綠色向左移動。
3. 向上或向下按，綠色也去中間一排（四五六） 來自 HTML。

我希望綠色根據我按下的按鈕向各個方向移動。 例如，如果它在 1 並按下，則轉到 4。如果它在 1，則按向右轉到 2。如果它在 2，然后按向左，則轉到 1，以此類推

鍵碼為：左：37，右：39，上：38，下：40

怎么做到呢？ 非常感謝！！！

 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>

Answer 1

這是我個人的解決方案。 我在概念上將所有內容分為行和列。

 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>

Answer 2

這可以通過假設一個網格來完成，如下所示：

1 2 3
4 5 6
7 8 9

讓我們選擇 5 作為起點。

• 往上走，你減去3
• 往下走，你加3
• 往左走，你減去1
• 往右走，你加 1

我們還必須處理超出范圍的情況：

• 當你小於或等於0時，你加9
• 當你大於9時，你減去9

以下是相同的工作代碼：

 $(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>