主页 / 问题 / 1411308
Accepted
user497202
Asked:2022-07-18 23:33:27 +0000 UTC2022-07-18 23:33:27 +0000 UTC

在 3x3 div 容器中使用箭头导航

  • 772

需要在 3x3 div 容器上使用箭头导航在此代码中，指针指向第一个元素周围的 4 个边，并且应该指向 9 个元素中的一个，并在按下回车键时单击在此处输入图像描述

   let pointer = document.createElement('div')

   pointer.className = 'tile'
   container.appendChild(pointer)
   console.log(pointer)
   pointer.style.display = 'none'
   pointer.classList.add('active')

   let newContainer = document.getElementsByClassName('container')[0]
   document.addEventListener('keydown', () => {

      pointer.style.display = 'block'

      pointer.tabIndex = 0;

      let rectElem = container.getBoundingClientRect();
      let x = rectElem.x + pageXOffset,
         y = rectElem.y + pageYOffset;

      if (event.code === 'ArrowRight') {
         x += pointer.offsetWidth;
      }
      if (event.code === 'ArrowLeft') {
         x -= pointer.offsetWidth;
      }
      if (event.code === 'ArrowUp') {
         y -= pointer.offsetHeight;
      }
      if (event.code === 'ArrowDown') {
         y += pointer.offsetHeight;
      }

      pointer.style.position = 'absolute';
      pointer.style.left = x + 'px';
      pointer.style.top = y + 'px';

   })
javascript dom

1 个回答

  1. Best Answer

    由于您已经拥有这些元素，因此不需要额外的pointer. 您可以简单地使用所需的索引更改元素的样式：

    let tiles = [...document.querySelectorAll('#container div')];
let tileIndex = 0;

const toggleTile = (i) => tiles[i].classList.toggle('active');
const di = { ArrowLeft: 8, ArrowRight: 1, ArrowUp: 6, ArrowDown: 3 };

toggleTile(tileIndex);

document.addEventListener('keydown', () => {
  if (di.hasOwnProperty(event.key)) {
    toggleTile(tileIndex);
    tileIndex = (tileIndex + di[event.key]) % 9;
    toggleTile(tileIndex);
  }
});
    #container {
  display: flex;
  flex-flow: row wrap;
  width: 165px;
}

#container div {
  flex: 1 1 30%;
  height: 55px;
  border: 1px solid black;
}

.active {
  background: blue;
}
    <div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

    • 0

相关问题