如何在JavaScript中获取动态按钮对应唯一信息Div的ID？

核心问题分析 #

当前问题主要出在两点：

1. 动态添加的按钮未正确绑定事件监听，悬停时无法触发正确逻辑
2. 使用data-position关联目标div的方式不可靠，且未正确传递/获取目标div的ID

具体解决步骤 #

1. 给按钮添加明确的目标ID关联属性

把原来的data-position改成直接存储目标div的ID（比如data-target-id），无需通过位置计算，直接关联对应元素：

<!-- 动态生成的按钮示例 -->
<button class="friend-button" data-target-id="friend_info1">好友1</button>
<button class="friend-button" data-target-id="friend_info2">好友2</button>

<!-- 对应的用户信息div -->
<div id="friend_info1" class="friend-info" style="display: none;">用户1的信息...</div>
<div id="friend_info2" class="friend-info" style="display: none;">用户2的信息...</div>

2. 用事件委托处理动态元素的悬停事件

因为按钮是动态添加的，直接给单个按钮绑定事件会失效，需把事件监听绑定到静态父元素上（比如所有按钮的容器）：

// 假设按钮都放在这个静态容器里
const buttonContainer = document.getElementById('friend-buttons-container');

// 监听容器内的鼠标悬停事件
buttonContainer.addEventListener('mouseover', function(e) {
  // 判断触发事件的元素是好友按钮
  if (e.target.classList.contains('friend-button')) {
    displayInfo(e.target);
  }
});

// 监听鼠标离开，隐藏信息
buttonContainer.addEventListener('mouseout', function(e) {
  if (e.target.classList.contains('friend-button')) {
    const allInfoDivs = document.querySelectorAll('.friend-info');
    allInfoDivs.forEach(div => div.style.display = 'none');
  }
});

3. 修正displayInfo和getUserInfo函数

直接从按钮的data-target-id获取目标div的ID，避免返回null的问题：

function displayInfo(button) {
  // 获取目标div的ID
  const targetId = button.dataset.targetId;
  const userInfoDiv = getUserInfo(targetId);
  
  if (userInfoDiv) {
    // 先隐藏所有其他信息div
    const allInfoDivs = document.querySelectorAll('.friend-info');
    allInfoDivs.forEach(div => div.style.display = 'none');
    // 显示当前目标div
    userInfoDiv.style.display = 'block';
  }
}

function getUserInfo(targetId) {
  // 直接通过ID获取元素
  return document.getElementById(targetId);
}

改动原因 #

• data-target-id直接存储目标ID，比data-position更可靠，不会因为DOM元素顺序变化导致关联错误
• 事件委托能确保动态添加的按钮也能触发事件，因为事件绑定在静态父元素上
• 直接用getElementById获取元素，避免了之前选择器错误导致返回null的问题

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