将片段 Jquery 转换为 JS

Question

我可以得到任何帮助来将此 Jquery sn-p 转换为 JS vanilla 吗？我一直在尝试这样做，但总是出错。提前感谢您的任何回复。

编辑：函数 move_player 是我要翻译的，其余的已经完成。

$(document).ready(function() {
  var end_of_track = 15;
  var players = [
    {
      id: 1,
      position: 0,
      keycode: 80,
      css_locator: '#player1_strip',
    },
    {
      id: 2,
      position: 0,
      keycode: 81,
      css_locator: '#player2_strip',
    },
  ];

  function advancePlayer(keyCode) {
    players.forEach(function(player) {
      if (
        keyCode == player.keycode &&
        players[0].position < end_of_track &&
        players[1].position < end_of_track
      ) {
        move_player(player.css_locator);
        player.position++;
        winner(player.position, player.id);
      }
    });
  }

  $(document).keyup(function(e) {
    advancePlayer(e.keyCode);
  });
});

function move_player(strip) {
  $(strip)
    .find('td.active')
    .removeClass('active')
    .next()
    .addClass('active');
}

function winner(player, num) {
  if (player > 14) {
    alert('Player ' + num + ' has won!');
  }
} ```

Answer 1

假设 ES6 是允许的，您可以使用 querySelector 找到当前活动的 td 元素，然后从元素 classList 中删除其活动类，然后使用 nextElementSibling 获取其兄弟 td 元素和将active 类添加到它。

ES6：

function move_player(strip)
{
    var activeElement = document.querySelector(`${strip} td.active`);
    activeElement.classList.remove('active');

    var nextElement = activeElement.nextElementSibling;
    nextElement.classList.add('active');
}

Example

在 ES6 之前：

function move_player(strip)
{
    strip = strip.replace('#', '');
    var stripElement = document.getElementById(strip);
    var activeElements = stripElement.getElementsByClassName('active');

    if(activeElements.length > 0)
    {
        var active = activeElements[0]
        active.classList.remove('active');
        var nextElement = active.nextElementSibling;
        nextElement.classList.add('active');
    }
}

Example