技术问题：如何获取li内锚点的data-id及点击li的data-id？

架构老林

2026-5-19

嘿，这两个需求都很好实现，我给你分场景整理了具体的代码方案：

一、获取

内部锚点元素的data-id（自动切换时）

既然你的列表会每5秒自动切换到下一个

，那在切换逻辑里，只需要找到当前激活的

内部的锚点元素，再读取它的data-id即可。这里有两种常用的读取方式：

// 先假设你的自动切换逻辑框架是这样的（可根据实际代码调整）
let currentIndex = 0;
const allLis = document.querySelectorAll('li');

function switchNextItem() {
  // 移除上一个li的激活状态（如果有样式需求）
  allLis[currentIndex].classList.remove('active');
  // 更新索引，循环切换
  currentIndex = (currentIndex + 1) % allLis.length;
  const currentActiveLi = allLis[currentIndex];
  currentActiveLi.classList.add('active');

  // 获取当前li内部的锚点元素
  const anchorElement = currentActiveLi.querySelector('a');
  if (anchorElement) {
    // 方式1：用getAttribute读取
    const anchorDataId = anchorElement.getAttribute('data-id');
    // 方式2：用dataset属性（更现代的写法，推荐）
    // const anchorDataId = anchorElement.dataset.id;
    console.log('当前锚点的data-id:', anchorDataId);
  }
}

// 启动5秒自动切换
setInterval(switchNextItem, 5000);

二、通过点击事件获取

自身的data-id

这里有两种实现思路，你可以根据列表是否是动态生成的来选择：

方式1：直接给每个
绑定点击事件

适合列表项固定不变的场景：

const allLis = document.querySelectorAll('li');
allLis.forEach(li => {
  li.addEventListener('click', function() {
    // 读取当前li的data-id
    const liDataId = this.dataset.id;
    // 或者用getAttribute：this.getAttribute('data-id')
    console.log('点击的li的data-id:', liDataId);
  });
});

方式2：事件委托（推荐）

如果你的列表项是动态生成的（比如后续会新增/删除

），用事件委托更高效，不需要每次更新列表都重新绑定事件：

// 找到列表的父容器（比如ul）
const listContainer = document.querySelector('ul');
listContainer.addEventListener('click', function(e) {
  // 向上查找点击目标所在的<li>元素
  const clickedLi = e.target.closest('li');
  if (clickedLi) {
    const liDataId = clickedLi.dataset.id;
    console.log('点击的li的data-id:', liDataId);
  }
});

小提示

如果你的data-id是带连字符的命名（比如data-user-id），用dataset读取的时候要改成驼峰命名：element.dataset.userId，对应data-user-id的值。

内容的提问来源于stack exchange，提问作者prnz

技术问题：如何获取li内锚点的data-id及点击li的data-id？

方式1：直接给每个绑定点击事件 #

方式2：事件委托（推荐） #

小提示 #

方式1：直接给每个
绑定点击事件

方式2：事件委托（推荐）

小提示