PHP动态生成Card后，如何用JS点击对应按钮获取同Card内输入值

嘿，这个问题我太熟了！核心原因是你重复使用了唯一的ID属性——HTML里id是用来标识单个元素的，你循环生成多个<div id='card'>和<input id='p_id'>，浏览器只会认第一个匹配的元素，所以不管点哪个按钮，都只会拿到第一个卡片里的值。下面给你一步步的解决方案：

第一步：修改PHP生成的HTML结构，把重复ID换成Class #

首先要把循环里重复的id属性改成class，因为class可以重复使用：

// 假设你原来的PHP循环代码大概是这样
foreach ($data as $item) {
    echo "<div class='card'>"; // 把id='card'改成class='card'
    echo "<input class='p_id' type='hidden' value='{$item['id']}' name='productID' />"; // 把id='p_id'改成class='p_id'
    echo "<button class='card-btn'>获取ID</button>"; // 给按钮加个class方便绑定事件
    echo "</div>";
}

第二步：用JavaScript事件委托获取对应卡片的输入值 #

因为卡片是动态生成的，直接给按钮绑定事件可能失效，所以推荐用事件委托——给父容器#contents绑定点击事件，再判断点击的是卡片里的按钮：

原生JavaScript写法 #

// 获取父容器
const contents = document.getElementById('contents');

// 给父容器绑定点击事件
contents.addEventListener('click', function(e) {
    // 判断点击的元素是卡片里的按钮
    if (e.target.classList.contains('card-btn')) {
        // 找到当前按钮所在的最近的.card容器
        const currentCard = e.target.closest('.card');
        // 在这个容器里找对应的.p_id输入框，获取它的值
        const productId = currentCard.querySelector('.p_id').value;
        
        // 这里就可以用productId做你需要的操作了
        console.log('当前卡片的产品ID：', productId);
    }
});

如果你用jQuery的话 #

// 事件委托绑定点击事件
$('#contents').on('click', '.card-btn', function() {
    // 找到当前按钮所在的.card容器，再找里面的.p_id输入框
    const productId = $(this).closest('.card').find('.p_id').val();
    console.log('当前卡片的产品ID：', productId);
});

关键原理说明 #

• closest('.card')：会向上查找当前元素最近的、带有card类的父元素，这样就能精准定位到点击按钮所在的卡片，不会和其他卡片混淆。
• 事件委托：因为动态生成的元素在页面加载时不存在，直接绑定事件会无效，通过给父容器绑定事件，就能监听所有子元素的点击，不管是一开始就有的还是后来生成的。

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