如何通过JavaScript点击列表元素获取其data-id属性值

你的核心需求是点击带有data-id属性的列表块时，正确获取到该属性的值。原代码存在的问题是：点击列表块内的子元素（比如标题、内容段落）时，e.target会指向子元素，而子元素没有data-id属性，导致无法拿到正确的值。下面提供几种可靠的实现方式：

原生JavaScript实现 #

方式1：直接绑定事件（修正原代码问题） #

利用this指向绑定事件的元素（即带data-id的.notice_item），避免子元素干扰：

let wrap = document.querySelector('.wrap');
let items = wrap.querySelectorAll('.notice_item');

for (let i = 0; i < items.length; i++) {
  items[i].onclick = function() {
    // 两种获取data-id的方式都可用
    console.log(this.dataset.id);
    // console.log(this.getAttribute('data-id'));
  }
}

方式2：事件委托（推荐，适配动态元素） #

不需要给每个列表块单独绑定事件，给父容器绑定事件后，通过事件冒泡找到目标元素，适合后续会动态添加列表块的场景：

let wrap = document.querySelector('.wrap');

wrap.addEventListener('click', function(e) {
  // 找到点击路径中最近的.notice_item元素
  const targetItem = e.target.closest('.notice_item');
  if (targetItem) {
    console.log(targetItem.dataset.id);
  }
});

jQuery实现（你的代码已引入jQuery） #

方式1：直接绑定事件 #

$('.notice_item').click(function() {
  // jQuery的data方法会自动解析data-*属性
  console.log($(this).data('id'));
  // 也可以用attr方法直接获取属性值
  // console.log($(this).attr('data-id'));
});

方式2：事件委托 #

$('.wrap').on('click', '.notice_item', function() {
  console.log($(this).data('id'));
});

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