使用 JavaScript 使用箭头键(向上和向下)选择 li 元素

在使用 JavaScript 进行网页开发时，我们经常需要处理键盘事件。其中一个常见的需求是根据用户按下的箭头键来选择页面上的列表项 (li 元素)。本文将介绍如何使用 JavaScript 实现此功能。

监听键盘事件

在开始之前，我们需要添加一个键盘事件监听器，以便捕获用户按下的键盘事件。可以通过以下代码将事件监听器添加到 document 对象上：

document.addEventListener('keydown', function(event) {
  // 处理键盘事件的逻辑将在这里编写
});

在上述代码中，keydown 事件是键盘按键被按下时触发的事件。

箭头键的键码

在处理键盘事件之前，我们需要了解箭头键的键码。以下是常用箭头键的键码值：

• 向上箭头键：38
• 向下箭头键：40

我们将在键盘事件的处理逻辑中使用这些键码。

选择 li 元素

现在我们已经有了监听键盘事件的基础，并且了解了箭头键的键码。接下来，让我们编写一段代码来选择页面上的 li 元素。

首先，我们需要找到所有符合条件的 li 元素。可以通过以下代码获取页面上所有的 li 元素：

const listItems = document.querySelectorAll('li');

接下来，我们定义一个变量 selectedIndex 用于保存当前选择的 li 元素的索引：

let selectedIndex = 0;

然后，我们使用键盘事件监听器中的逻辑来实现选择 li 元素的功能。以下是完整的代码示例：

document.addEventListener('keydown', function(event) {
  const listItems = document.querySelectorAll('li');
  let selectedIndex = 0;

  if (event.keyCode === 38) { // 向上箭头键
    selectedIndex = (selectedIndex - 1 + listItems.length) % listItems.length;
  } else if (event.keyCode === 40) { // 向下箭头键
    selectedIndex = (selectedIndex + 1) % listItems.length;
  }

  // 添加适当的样式来突出显示选择的项
  listItems.forEach((item, index) => {
    if (index === selectedIndex) {
      item.classList.add('selected');
    } else {
      item.classList.remove('selected');
    }
  });
});

在上述代码中，我们使用余数运算符 (%) 来循环选择 li 元素。当用户按下向上箭头键时，我们将索引值减 1 并确保它大于等于零。当用户按下向下箭头键时，我们将索引值加 1 并通过取模运算符 (%) 确保它不超过 li 元素的个数。

最后，我们使用 classList 属性来添加和移除适当的 CSS 类名，以突出显示选择的 li 元素。

使用 Markdown 格式展示代码

以下是上述代码片段的 Markdown 格式表示：

```javascript
document.addEventListener('keydown', function(event) {
  const listItems = document.querySelectorAll('li');
  let selectedIndex = 0;

  if (event.keyCode === 38) { // 向上箭头键
    selectedIndex = (selectedIndex - 1 + listItems.length) % listItems.length;
  } else if (event.keyCode === 40) { // 向下箭头键
    selectedIndex = (selectedIndex + 1) % listItems.length;
  }

  // 添加适当的样式来突出显示选择的项
  listItems.forEach((item, index) => {
    if (index === selectedIndex) {
      item.classList.add('selected');
    } else {
      item.classList.remove('selected');
    }
  });
});

请注意，在 Markdown 中，我们使用三个反引号 (\`\`\`) 来标记代码块，并指定代码块的语言为 JavaScript (`javascript`)。

希望这篇文章能帮助你了解如何使用 JavaScript 来实现使用箭头键选择 `li` 元素的功能。