键码/在按钮组上上下左右移动

Question

我尝试用键盘上的四个方向键移动按钮上的绿色悬停颜色。问题是它不能正常移动。我想要的是:

1. 按右键，绿色移到右边。
2. 按左键，绿色移到左边。
3. 按上下键，绿色也会移到中间行(45,6)，而不会从HTML中移除。

我想要绿色的颜色在所有的方向取决于我按下的按钮。如果它在1并按下，转到4。如果是1，按右转到2。如果是2，按左键，转到1等

键码为:Left:37, Right:39, Up:38, Down: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>