如何通过 JavaScript 获取被点击卡片中的商品信息-html教程-PHP中文网

如何通过 JavaScript 获取被点击卡片中的商品信息

本文介绍一种健壮、无需硬编码 ID 的方式，利用事件委托与 DOM 遍历，精准获取用户点击的卡片内标题和价格等数据，并避免因 ID 错误或元素未找到导致的 Cannot read properties of null 报错。

本文介绍一种健壮、无需硬编码 id 的方式，利用事件委托与 dom 遍历，精准获取用户点击的卡片内标题和价格等数据，并避免因 id 错误或元素未找到导致的 `cannot read properties of null` 报错。

在实际开发中，为每张卡片动态生成唯一 ID（如 ${id}-product-name）虽可行，但极易因 ID 拼写错误、遗漏变量插值或 DOM 渲染时机问题引发 getElementById(...) 返回 null，最终触发 Uncaught TypeError。更优解是放弃依赖全局 ID 查找，转而基于事件目标定位当前卡片，再在其作用域内局部查询子元素——这正是现代前端推荐的“事件委托 + 作用域限定”模式。

✅ 推荐方案：事件委托 + closest() + querySelector()

// 1. 封装信息提取逻辑：接收 card 元素，返回结构化数据
const getCardInfo = (card) => {
  const titleEl = card.querySelector('.card-title');
  const priceEl = card.querySelector('.card-price');

  return {
    title: titleEl?.textContent?.trim() || '',
    price: priceEl?.textContent?.trim() || ''
  };
};

// 2. 定义点击处理逻辑
const onCardClick = (card) => {
  const { title, price } = getCardInfo(card);

  // 示例：添加到订单列表
  const orderList = document.getElementById('orderList');
  if (!orderList) return;

  const li = document.createElement('li');
  li.textContent = `${title} — ${price}`;
  orderList.appendChild(li);

  console.log('✅ 已添加:', { title, price });
};

// 3. 统一监听：利用事件委托，避免为每个卡片重复绑定
document.addEventListener('click', (event) => {
  // 向上查找最近的 .card 祖先元素（支持点击图片、标题、空白区域等任意位置）
  const card = event.target.closest('.card');
  if (card) {
    onCardClick(card);
  }
});

⚠️ 关键注意事项

closest() 是核心：它从点击的目标元素开始，逐级向上查找匹配的选择器（.card），确保无论用户点在卡片内的图片、标题还是空白处，都能准确捕获所属卡片。
querySelector() 作用域安全：在 card 元素内部查找 .card-title 和 .card-price，完全避开全局 ID 冲突与拼写风险。
可选链 ?. 提升健壮性：防止子元素缺失时抛出异常（如卡片结构临时变动）。
避免循环绑定：原代码中用 for 循环为每个 .cards 元素绑定事件，不仅性能低，且若卡片动态增删需重新绑定；事件委托天然支持动态内容。
HTML 无需修改 ID：保留你原有的结构即可，无需为每个卡片预设 id 属性，大幅降低模板维护成本。

? 扩展建议

若需传递更多字段（如商品 ID、图片 URL），可在卡片上添加 data-* 属性：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

<div class="card cards" data-product-id="54" data-image-url="https://.../pizza.png">
  <!-- ... -->
</div>

然后在 getCardInfo() 中读取：

const productId = card.dataset.productId;
const imgUrl = card.dataset.imageUrl;

这种基于语义化属性与 DOM 层级关系的设计，让代码更可读、可维护、可测试，是构建高可靠性交互组件的基石。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南