题解 | #移动控制#

生成table.id == 'jsLayout'表格，m个tr，每个tr n个td（m>=1,n>=1),并随机选中一个td节点

bind函数：

    1.按下 方向键，找出td节点，并切换td节点

    2.在第一列往左移动则到达最后一列；在最后一列往右移动则到达第一列；在第一行往上移动则到达最后一行；在最后一行往下移动则到达第一行；

我先吐槽一下，明明说是要生成id=='Layout'的表格，结果测试是用game类获取table

    function bind() {
      // 在document上监听keydown事件
      document.onkeydown = event => {
        // 1、提供符合要求的event.keyCode 
        if (!event) return;
        var code = event.keyCode || '';
        // keyCode必须等于'37' '38' '39' '40'
        if (!{ '37': 1, '38': 1, '39': 1, '40': 1 }[code]) return;
        // 阻止默认行为，放置持续按压，触发多次
        event.preventDefault && event.preventDefault();
        // 2、根据keyCode控制行为
        //TODO: 请实现按键控制
        // 2.1找出高亮的td节点
        let jsLayout = document.querySelector('.game')
        let hightLightTd = jsLayout.querySelector('.current')
        // 2.2根据keyCode切换td
        switch (code) {
          // 左
          case 37:
            hightLightTd.classList.remove('current')
            let previousElement = hightLightTd.previousElementSibling

            if (!previousElement) {
              hightLightTd.parentNode.lastElementChild.classList.add('current')
              break
            }

            previousElement.classList.add('current')
            break
          // 上
          case 38:
            hightLightTd.classList.remove('current')

            let parentPriviousTr = hightLightTd.parentNode.previousElementSibling
            if (!parentPriviousTr) {
              hightLightTd.closest('tbody').lastElementChild.cells[hightLightTd.cellIndex].classList.add('current')
              break
            }

            parentPriviousTr.cells[hightLightTd.cellIndex].classList.add('current')
            break
          // 右
          case 39:
            hightLightTd.classList.remove('current')
            let nextElement = hightLightTd.nextElementSibling

            if (!nextElement) {
              hightLightTd.parentNode.firstElementChild.classList.add('current')
              break
            }

            nextElement.classList.add('current')
            break
          // 下
          case 40:
            hightLightTd.classList.remove('current')

            let parentNextTr = hightLightTd.parentNode.nextElementSibling
            if (!parentNextTr) {
              hightLightTd.closest('tbody').firstElementChild.cells[hightLightTd.cellIndex].classList.add('current')
              break
            }

            parentNextTr.cells[hightLightTd.cellIndex].classList.add('current')
            break
        }
      };
    };