JavaScript如何在点击事件中获取对应li内的图片与文本值

你现有代码的核心问题是没有正确拿到绑定事件的li元素本身，直接使用event.target会在点击li内部的img/span子元素时拿到错误的节点，按以下修改即可实现需求：

方案1：保留内联事件的快速修改方式 #

• 第一步：修改li上的onclick属性，把当前li元素作为参数传入函数
  把所有li标签上的onClick="reply_click();"改为onClick="reply_click(this);"
• 第二步：修改JS函数，从传入的li节点中提取对应内容

function reply_click(liItem) {
  // 获取li的id
  const currentId = liItem.id;
  // 获取li下图片的地址
  const imgSrc = liItem.querySelector('img').src;
  // 获取li下的文本值
  const textValue = liItem.querySelector('.coinText').textContent.trim();

  console.log('选中项id：', currentId);
  console.log('图片地址：', imgSrc);
  console.log('文本内容：', textValue);
}

CSS部分不需要做任何改动，修改后点击任意li位置，都能正确拿到对应的数据。

方案2：更推荐的事件委托写法（无内联事件） #

不需要给每个li加onclick属性，直接给外层ul绑定一次事件即可，后续动态新增的列表项也能自动响应点击，维护成本更低：

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const coinList = document.querySelector('.coinList');
  coinList.addEventListener('click', function(e) {
    // 向上查找最近的li元素，兼容点击li内部子元素的场景
    const currentLi = e.target.closest('li');
    if (!currentLi || !coinList.contains(currentLi)) return;

    const currentId = currentLi.id;
    const imgSrc = currentLi.querySelector('img').src;
    const textValue = currentLi.querySelector('.coinText').textContent.trim();
    
    console.log('选中项id：', currentId);
    console.log('图片地址：', imgSrc);
    console.log('文本内容：', textValue);
  })
})

对应的HTML可以简化为：

<ul class="coinList">
  <li id="1">
    <img src="https://via.placeholder.com/140x100" />
    <span class="coinText">one</span>
  </li>
  <li id="2">
    <img src="https://via.placeholder.com/140x100" />
    <span class="coinText">two</span>
  </li>
</ul>

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