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

Question

我正在尝试用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>

Answer 1

您面临着一个有趣的挑战。 基于HTML，我假设您想要一个多人游戏。 我把那部分留给你。 但是，这是为单个玩家执行的操作（然后跟踪谁是活跃的，并且可以将其调整为两名玩家）：

使用document.onkeyup ，如果分配了功能，则每次按键“向上”时都会被调用（例如，当我按下“ k”键时，它先向下然后向上，因此监听向上是一个完整按键）。 调用该函数时，将传递一个事件。 我们知道标准说keyCode中将存在一个称为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/（请注意，单击带有蓝色和红色圆圈的右下窗格，然后使用上/下或左/右键移动红色方块）