使用 Javascript 将类从一个标签移动到另一个标签

Moving a class from one tag to another using Javascript

本文关键字：标签 一个 移动 另一个 Javascript 使用      更新时间：2023-09-26

我正在尝试在Javascript中创建一个函数，每次释放键时，该函数都会在页面上推进一些形状(表格中的彩色单元格(。我是一个完全的新手，所以现在，我只是想弄清楚如何在用户键入时将"活动"类从一个<td>标签移动到另一个标签。

<table class="racer_table">
      <tr id="player1">
        <td class="active"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr id="player2">
        <td class="active"></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

你有一个有趣的挑战。基于HTML，我假设你想要一个多人游戏。我会把这部分留给你。但是，您可以为单个玩家执行此操作(然后只需跟踪谁处于活动状态，即可将其适应两个玩家(：

使用document.onkeyup如果为它分配了一个函数，则每次键"向上"时都会被调用(例如，当我按"k"键时，它会下降然后向上，因此侦听向上是完全按键(。调用函数时，会向其传递一个事件。我们知道该标准说一个名为keyCode的属性将存在于事件上，这是一个数值。我们可以用它来识别按下了哪个键。

所以假设我们有这个 HTML：

<table class="racer_table">
  <tr>
    <td class="active"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

我们设置了它的样式，以便我们可以将td视为颜色的正方形：

td {
  width: 50px;
  height: 50px;
  background-color: blue;
}
td.active {
  background-color: red;
}

然后使用这个 JavaScript：

var UP = 38;
var DOWN = 40;
var LEFT = 37;
var RIGHT = 39;
var racerTable = document.getElementsByClassName('racer_table')[0];
document.onkeyup = function(e) {
  switch (e.keyCode) {
    case UP:
    case LEFT:
      var cells = racerTable.getElementsByTagName('td');
      for (var i=0; i < cells.length; i++) {
        if (cells[i].className.indexOf('active') !== -1) {
          if (i === 0) {
            // do nothing, all the way left
          } else {
            cells[i].className = '';
            cells[i-1].className = 'active';
            break;
          }
        }
      }
      break;
    case DOWN:
    case RIGHT:
      var cells = racerTable.getElementsByTagName('td');
      for (var i=0; i < cells.length; i++) {
        if (cells[i].className.indexOf('active') !== -1) {
          if (i === (cells.length - 1)) {
            // do nothing, all the way right
          } else {
            cells[i].className = '';
            cells[i+1].className = 'active';
            break;
          }
        }
      }
      break;
  }
}

JSFiddle：https://jsfiddle.net/5wuc0mre/(注意，单击右下窗格的蓝色和红色圆圈，然后使用向上/向下或向左/向右键移动红色方块(

相关文章：