获取HTML data属性遇undefined及点击li取data-num的纯JS问题

方案一：事件委托（推荐，尤其适合动态新增

的场景） #

这种方法只需要给父元素<ul>绑定一次点击事件，通过事件冒泡判断点击的目标是不是<li>，效率更高：

let locSel = document.getElementById('locationSelect');

// 给ul绑定点击事件
locSel.addEventListener('click', function(e) {
  // 确认点击的是拥有location-select类的li元素
  if (e.target.classList.contains('location-select')) {
    // 两种获取data-num的方式都可行
    const dataNum = e.target.getAttribute('data-num');
    // 或者用dataset API：const dataNum = e.target.dataset.num;
    console.log('当前点击的li的data-num值：', dataNum);
    // 这里可以添加你需要的后续逻辑，比如展示值、发送请求等
  }
});

方案二：遍历

逐个绑定事件 #

如果你的

let locSel = document.getElementById('locationSelect');
// 获取所有带location-select类的li元素
const locationItems = locSel.querySelectorAll('.location-select');

// 遍历每个li绑定点击事件
locationItems.forEach(item => {
  item.addEventListener('click', function() {
    // 这里用this就可以指代当前点击的li元素
    const dataNum = this.dataset.num;
    // 或者用getAttribute：const dataNum = this.getAttribute('data-num');
    console.log('当前点击的li的data-num值：', dataNum);
  });
});

关于你之前得到undefined的可能原因： #

• 可能没有判断点击目标就直接获取属性，比如点击到了<ul>本身，而它没有data-num属性，自然返回undefined；
• 可能错误地使用了属性获取方式，比如把dataset.num写成了dataset.dataNum（data-num对应的dataset属性是num，不是驼峰的dataNum）；
• 可能没有正确选中<li>元素，比如直接操作了父元素<ul>去获取data-num。

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