题解 | #移动控制# 已通过

代码如下:

function bind() {
        document.onkeydown = event => {
            if (!event) return;
            var code = event.keyCode || '';
            if (!{'37': 1, '38': 1, '39': 1, '40': 1}[code]) return;
            event.preventDefault && event.preventDefault();
            //TODO: 请实现按键控制
            let current = document.querySelector('.current')	// 拿到高亮元素
            let index = Array.from(current.parentElement.children).indexOf(current)	// 记录高亮元素在父元素的孩子数组中的位置
            current.classList.remove('current')	// 移动前的预先操作，消除高亮类标签
          
          
          	/* 移动操作
            * 1. 判断 移动方向 上的下一个位置是否存在
            * 2. 存在，则添加高亮类属性
            * 3. 不存在，则在 相对方向 上的元素添加高亮类属性
            */
            if (code === 37) current.previousElementSibling ? current.previousElementSibling.classList.add('current') : current.parentElement.lastElementChild.classList.add('current')// 向左移动
            if (code === 38) current.parentElement.previousElementSibling ? current.parentElement.previousElementSibling.children.item(index).classList.add('current') : current.parentElement.parentElement.lastElementChild.children.item(index).classList.add('current')// 向上移动
            if (code === 39) current.nextElementSibling ? current.nextElementSibling.classList.add('current') : current.parentElement.firstElementChild.classList.add('current')// 向右移动
            if (code === 40) current.parentElement.nextElementSibling ? current.parentElement.nextElementSibling.children.item(index).classList.add('current') : current.parentElement.parentElement.firstElementChild.children.item(index).classList.add('current')// 向下移动
        };
    }