如何用jQuery获取多个div的ID？修复DVD产品删除功能异常

问题根源 #

1. 原代码中$('[class="product-dvd"]').attr('id')会直接返回第一个匹配元素的ID，无法定位到实际选中的产品项。
2. 原判断逻辑仅检查是否存在选中的复选框，无法关联到具体选中的产品容器。

修改后的代码 #

PHP代码（优化复选框属性，方便批量处理）

<?php foreach($dvdLists as $key => $dvdList) { ?>
   <div class="product-dvd" id="<?= $dvdList->id_dvd ?>">
      <!-- 将name改为数组格式，后端可直接接收批量ID；同时把产品ID设为复选框value，作为备选获取方式 -->
      <input class="delete-checkbox" type="checkbox" name="checkDvd[]" value="<?= $dvdList->id_dvd ?>">
      <p> <?= $dvdList->sku ?>  </p>
      <p> <?= $dvdList->name ?> DVD </p>
      <p> <?= $dvdList->price?> $ </p>
      <p> Size: <?= $dvdList->size ?> MB </p>
  </div> 
<?php } ?>

jQuery代码（精准获取选中产品的ID）

$('#delete-product-btn').click(function(){
    // 遍历所有被选中的删除复选框
    $('input.delete-checkbox:checked').each(function(){
        // 向上查找最近的.product-dvd容器，获取对应产品ID
        var productId = $(this).closest('.product-dvd').attr('id');
        alert('选中的产品ID：' + productId);
        
        // 若要执行删除操作，可在此添加AJAX请求或DOM移除逻辑
        // 示例：删除后移除对应产品容器
        // $(this).closest('.product-dvd').remove();
    });
});

核心优化点 #

• 使用input.delete-checkbox:checked精准筛选所有被选中的复选框。
• 通过.closest('.product-dvd')定位当前复选框所属的产品容器，确保获取到的是当前选中项对应的ID，而非第一个元素的ID。
• 用.each()遍历处理多个选中项，支持批量删除场景。

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