使用JavaScript获取点击的同class元素ID并返回值的实现咨询

完整代码示例 #

// 存储用户选中的气泡ID，全局作用域下所有函数均可访问
let userSelectedBubbleId = null;

// 等待DOM完全加载后再绑定事件，避免找不到元素
document.addEventListener('DOMContentLoaded', () => {
  // 选中所有class为bubble的图片元素，遍历绑定点击事件
  document.querySelectorAll('.bubble').forEach(bubbleEl => {
    bubbleEl.addEventListener('click', function() {
      // 直接获取当前点击元素的ID，存入变量
      userSelectedBubbleId = this.id;
      // 可选：点击后立刻触发对比逻辑，不需要可以删除
      compareBubbleResult();
    })
  })
})

// 工具函数：生成电脑随机选中的气泡ID
function getRandomBubbleId() {
  const allBubbleIds = ['blue', 'green', 'pink', 'purple'];
  return allBubbleIds[Math.floor(Math.random() * allBubbleIds.length)];
}

// 对比逻辑函数，可在任意位置调用
function compareBubbleResult() {
  // 先判断用户是否已经选中气泡，避免空值报错
  if (!userSelectedBubbleId) {
    alert('请先点击选择一个气泡');
    return;
  }
  const randomBubbleId = getRandomBubbleId();
  // 以下为自定义对比逻辑，可根据需求修改
  if (userSelectedBubbleId === randomBubbleId) {
    alert(`匹配成功！双方都选择了${userSelectedBubbleId}`);
  } else {
    alert(`匹配失败，你选择了${userSelectedBubbleId}，电脑选择了${randomBubbleId}`);
  }
}

核心逻辑说明 #

• 点击事件绑定通过querySelectorAll批量选中所有气泡元素，遍历逐个绑定监听，触发点击时通过this.id直接获取对应元素的ID属性值
• 全局变量userSelectedBubbleId负责存储用户选中的ID，所有在同一作用域下的函数都可以直接读取该变量的值进行业务处理
• 内置非空判断逻辑，避免用户未点击气泡就调用对比函数出现空值报错

注意事项 #

• 若JS代码放在HTML的<body>标签末尾，可以省略外层的DOMContentLoaded事件包裹
• 不需要点击后立刻触发对比的话，删除点击事件中的compareBubbleResult()调用即可，在任意需要的时机直接读取userSelectedBubbleId变量使用即可

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