在本机Javascript中选择下一个HTML同级_Javascript_Arrays

在本机Javascript中选择下一个HTML同级

javascript arrays

在本机Javascript中选择下一个HTML同级,javascript,arrays,Javascript,Arrays,我是javascript新手，我正在创建一个“按下键盘按钮，让这个黑色方块前进”的游戏。我试图找出如何创建一个本机javascript函数，该函数允许：按键给元素一个“活动”类，该类在已具有“活动”类的元素的下一行（或同级）中。我还想让“current”元素同时删除它的“active”类到目前为止，我已经成功地创建了一个函数，它允许单击，并在所选上添加类“active”，同时从其周围的同级中删除任何“active”类。当按下字母“m”时，我不想单击，而是想给下一个设置“活动” 如果我不善于解

我是javascript新手，我正在创建一个“按下键盘按钮，让这个黑色方块前进”的游戏。我试图找出如何创建一个本机javascript函数，该函数允许：

按键给

元素一个“活动”类，该类在已具有“活动”类的

元素的下一行（或同级）中。我还想让“current”元素同时删除它的“active”类

到目前为止，我已经成功地创建了一个函数，它允许单击

，并在所选

上添加类“active”，同时从其周围的同级中删除任何“active”类。当按下字母“m”时，我不想单击，而是想给下一个

设置“活动”

如果我不善于解释，请道歉：以下是我的代码：

var racerTable=document.getElementsByClassName（“racer表”）；
var p1items=document.getElementById（“player1 strip”）.queryselectoral（“td”）；
var lastp1=p1items[p1items.length-1]；
对于（变量i=0；i


.racer表td{
背景色：#ededed；
高度：50px；
宽度：50px；
}
.racer表td激活{
背景色：黑色；
}
HTML-注意添加了tabindex属性，该属性允许聚焦元素，从而触发keydown事件
<body>
  <table class="racer-table">
    <tr id="player1-strip" tabindex="1">
      <td class="active"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

这是一个简单的例子。您可以扩展switch语句来处理更多的键
在CentOS上的Firefox下编写-您可能需要调整其他浏览器或操作系统的代码。
将单击事件中的此替换为document.querySelectorAll（“td.active”）还可以查看elm.nextElementSibling
，它可以为您节省一些键入时间…表中的单元格具有。如果要访问的下一个单元格位于同一行中，只需获取下一个索引最高的单元格即可。例如，row=cell.parentNode；nextCell=row.cells[cell.cellIndex+1]。不要把监听器放在每一个单元格上，考虑把一个侦听器放在桌子上（搜索事件委派）。你是一个传奇，有魔力——我在这上了2HR+，为此欢呼。
// Get the player's strip
var control = document.getElementById("player1-strip");

// Add an event handler to the strip (tr)
control.addEventListener("keydown", function(event) {

  // Get the current active td
  var active = document.querySelector(".active");

  // Get the letter from the key pressed, lowercase it 
  var letter = String.fromCharCode(event.keyCode).toLowerCase();
  var next;

  // Show it in the console (Firebug)
  console.log(letter);

  // Act on the key
  switch (letter) {
    case 'm':
      // Get the next cell in the row
      next = document.querySelector(".active + td");

      // Remove the active class from the current active cell
      active.classList.remove("active");

      // If there is another cell
      if (next !== null) {

        // Make the next cell active
        next.classList.add("active");
      } else {
        console.log('Done');
      }
      console.log(next);
      break;
  }
});