javascript - 在悬停颜色上提交/更改多个innerHTML，使用键码

Question

因此，当我按下键盘上的箭头键(向左、向右、向上、向下)时，绿色悬停颜色会转到相应的按钮。
我想要做的是，每次按下“返回”或“输入”键(键码 13)时，都会在屏幕上写下相应的数字。
例如，如果绿色悬停颜色为 2 并且我按下“Return/Enter”键，则在屏幕上写下“Two”。我希望鼠标也能发生同样的事情。例如，如果我点击 2 ，在屏幕上写上“Two”。
我怎样才能做到这一点？
当然，在所有这些方面更好的编码总是受欢迎的。
非常感谢!!!

var columns = 0;
var rowButtons = 0;

var $rows = $('.multiple');
var buttonSelected;
var arrows = { left: 37, up: 38, right: 39, down: 40, enter: 13 };



$(window).keydown(function(e) {
  
    if (Object.values(arrows).indexOf(e.which) > -1) {
    e.preventDefault();
    $('.multiple button').removeClass('selected');
  
    switch (e.which) {
    case arrows.up:
    rowButtons = rowButtons == 0 ? $rows.length - 1 : rowButtons - 1;
    break;
        
    case arrows.down:
    rowButtons = rowButtons == $rows.length - 1 ? 0 : rowButtons + 1;
    break;     
        
    case arrows.left:
    $buttonsInRow = $('.multiple:eq(' + rowButtons + ') button');
    columns = columns == 0 ? $buttonsInRow.length - 1 : columns - 1;
    break;

    case arrows.right:
    $buttonsInRow = $('.multiple:eq(' + rowButtons + ') button');
    columns = columns == $buttonsInRow.length - 1 ? 0 : columns + 1;
    break;
   
    case arrows.enter:
    rowButtons = rowButtons == $rows.click;
    document.getElementById("screen").innerHTML ="one"
    break;
    
   }
    buttonSelected = $('.multiple:eq(' + rowButtons + ') button:eq(' + columns + ')');
    buttonSelected.addClass('selected');
  }

});

#screen {
  width:100%;
  padding:20px;
  background: #222;
  color:lime;
}

button.selected {
  background: green
}

.multiple button {
  border: 1px solid blue;
  color: #222;
  padding: 10px 25px;
  cursor: pointer;
  width:25%;
}

.multiple button:hover {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <button id="screen">--</button>

<div class="multiple">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>
<div class="multiple">
  <button>4</button>
  <button>5</button>
  <button>6</button>
</div>
<div class="multiple">
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

Answer 1

对于箭头键:
既然你有 columns和 rowButtons变量，您可以计算当前悬停在哪个数字上。每行构成移动三列。所以如果我们有 rowButtons = 1那么列位置将在 4(这是第二行的开始)。因此，如果我们想知道我们如何移动数字，我们可以做 rowButtons * 3来计算那部分。然后留下列:每次 columns增加 1，数字也向上移动 1(数字是我们键盘上的位置)。所以我们可以添加 columns到 rowButtons * 3获取数值，但由于 columns从零开始(以 1 开头的列表示 columns = 0 )我们需要加一才能得到精确的值，所以我们得到:

rowButtons * 3 + columns + 1

所以我们现在已经计算了数字，但由于您似乎想要字符串值，我们可以向我们的 javascript 添加一个对象，其中每个键是从数字到字符串的映射(又名 2: "two")。
由于您还提到您希望能够在键盘上单击，我们可以为所有按钮添加一个按钮监听器，单击时使用相同的对象映射为我们提供字符串。我会说该监听器假定页面上的所有按钮都是键盘按钮，因此您可能需要添加一个像类一样的标识符以确保没有任何问题。我没有更改任何 HTML 或 CSS，但这里有一个简单的示例:

var columns = 0;

var rowButtons = 0;

var $rows = $('.multiple');
var buttonSelected;
var arrows = {
  left: 37,
  up: 38,
  right: 39,
  down: 40,
  enter: 13
};

var tableValues = {
  1: "one",
  2: "two",
  3: "three",
  4: "four",
  5: "five",
  6: "six",
  7: "seven",
  8: "eight",
  9: "nine"
};

$(window).keydown(function(e) {

  if (Object.values(arrows).indexOf(e.which) > -1) {
    e.preventDefault();
    $('.multiple button').removeClass('selected');

    switch (e.which) {
      case arrows.up:
        rowButtons = rowButtons == 0 ? $rows.length - 1 : rowButtons - 1;
        break;

      case arrows.down:
        rowButtons = rowButtons == $rows.length - 1 ? 0 : rowButtons + 1;
        break;

      case arrows.left:
        $buttonsInRow = $('.multiple:eq(' + rowButtons + ') button');
        columns = columns == 0 ? $buttonsInRow.length - 1 : columns - 1;
        break;

      case arrows.right:
        $buttonsInRow = $('.multiple:eq(' + rowButtons + ') button');
        columns = columns == $buttonsInRow.length - 1 ? 0 : columns + 1;
        break;

      case arrows.enter:
        // find the column and row position:
        var pos = (rowButtons * 3) + columns + 1;
        console.log(pos);
        rowButtons = rowButtons == $rows.click;
        document.getElementById("screen").innerHTML = tableValues[pos];
        break;

    }
    buttonSelected = $('.multiple:eq(' + rowButtons + ') button:eq(' + columns + ')');
    buttonSelected.addClass('selected');
  }

});

$("button").click(function() {
  let pos = $(this).text();

  document.getElementById("screen").innerHTML = tableValues[pos];
});

#screen {
  width: 100%;
  padding: 20px;
  background: #222;
  color: lime;
}

button.selected {
  background: green
}

.multiple button {
  border: 1px solid blue;
  color: #222;
  padding: 10px 25px;
  cursor: pointer;
  width: 25%;
}

.multiple button:hover {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="screen">--</button>

<div class="multiple">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>
<div class="multiple">
  <button>4</button>
  <button>5</button>
  <button>6</button>
</div>
<div class="multiple">
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>