网页卡片点击按钮获取详情（开关状态/设备名）实现方法咨询

嘿，这个需求我之前帮不少人解决过，其实思路很清晰，结合你的卡片列表场景，我给你两个实用的实现方案，直接就能套用：

首先先假设你的卡片HTML结构大概是这样（如果你的结构略有不同，只需要调整选择器即可）：

<!-- 所有卡片的父容器 -->
<div class="card-container">
  <!-- 单张卡片 -->
  <div class="device-card" data-device-id="1">
    <h3 class="device-name">客厅吸顶灯</h3>
    <div class="switch-status">已开启</div>
    <button type="submit" class="submit-btn">查看详情</button>
  </div>
  <!-- 另一张卡片 -->
  <div class="device-card" data-device-id="2">
    <h3 class="device-name">卧室空调</h3>
    <div class="switch-status">已关闭</div>
    <button type="submit" class="submit-btn">查看详情</button>
  </div>
</div>

方案1：原生JavaScript（事件委托，推荐） #

事件委托是列表场景下的最优解，不用给每个按钮单独绑定事件，性能更好，而且动态新增的卡片也能自动生效：

// 给卡片的父容器绑定点击事件
document.querySelector('.card-container').addEventListener('click', function(e) {
  // 只处理点击submit按钮的情况
  if (e.target.classList.contains('submit-btn')) {
    // 找到当前按钮所属的卡片（closest会向上查找最近的.device-card元素）
    const currentCard = e.target.closest('.device-card');
    
    // 提取卡片里的详情信息
    const deviceName = currentCard.querySelector('.device-name').textContent.trim();
    const switchStatus = currentCard.querySelector('.switch-status').textContent.trim();
    const deviceId = currentCard.dataset.deviceId; // 读取data属性里的设备ID
    
    // 这里可以执行你需要的操作，比如打印信息、发送请求等
    console.log('当前设备详情:', {
      设备名称: deviceName,
      开关状态: switchStatus,
      设备ID: deviceId
    });
    
    // 如果要提交到后台，示例请求：
    // fetch('/your-api-endpoint', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ deviceId, deviceName, switchStatus })
    // });
  }
});

方案2：jQuery实现（如果项目已引入jQuery） #

如果你的项目还在使用jQuery，写法会更简洁：

// 同样用事件委托绑定
$('.card-container').on('click', '.submit-btn', function() {
  // 获取当前按钮所属的卡片
  const $currentCard = $(this).closest('.device-card');
  
  // 提取详情
  const deviceName = $currentCard.find('.device-name').text().trim();
  const switchStatus = $currentCard.find('.switch-status').text().trim();
  const deviceId = $currentCard.data('device-id');
  
  // 执行后续操作
  console.log('当前设备详情:', { deviceName, switchStatus, deviceId });
});

几个关键注意点： #

• 为什么用closest？不管你的submit按钮在卡片里嵌套多少层，closest都能准确找到最近的父级卡片元素，比parent()或parents()更可靠。
• 用data-*属性存储设备ID这类后台需要的固定数据，比从文本内容里提取更稳定，避免文本修改导致数据错误。
• 事件委托的优势：如果后续通过JS动态新增卡片（比如分页加载、新增设备），不需要重新给新按钮绑定事件，父容器的事件会自动处理。

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