如何让JavaScript代码处理PHP foreach循环生成的每个元素？

你遇到的核心问题是HTML中ID必须是唯一标识，但你的foreach循环生成了多个带有id="buy_product_form"的按钮——document.getElementById()只会返回匹配的第一个元素，所以只有第一个按钮能触发你的JavaScript逻辑。下面是具体的修改方案：

第一步：修正PHP/HTML代码（移除重复ID） #

把按钮上重复的id="buy_product_form"去掉，改用类选择器来标识所有购买按钮（比如保留pop_maker的同时，新增buy-product-btn类）。ID重复不仅不符合HTML规范，还会导致DOM选择器失效。

修改后的按钮代码片段：

<button data-item="product" 
        data-item_id="<?=$catalog_product_value['product_id']?>" 
        data-id="card_<?=($key + 1)?>" 
        data-title="<?=htmlspecialchars($catalog_product_value['header'])?>"
        <? if (!empty($catalog_product_value['options'])): ?>
        data-options="<?=htmlspecialchars(json_encode($catalog_product_value['options']), ENT_QUOTES, 'UTF-8')?>"
        <? else: ?>
        data-price="<?=preg_replace('/[^0-9.]+/', '', $catalog_product_value['price'])?>"
        <? endif; ?>
        class="pop_maker buy-product-btn">
  <?=$catalog_product_value['price']?>
</button>

第二步：修改JavaScript逻辑（处理所有按钮） #

不再通过ID获取单个按钮，而是用类选择器获取所有购买按钮，给每个按钮绑定独立的点击事件。同时把表单生成逻辑封装到点击事件回调中，确保每个按钮点击时都能读取自身的data属性。

修改后的JavaScript代码：

window.onload = function(){
  // 获取所有带有buy-product-btn类的按钮
  const buyButtons = document.querySelectorAll('.buy-product-btn');
  
  // 遍历每个按钮，绑定点击事件
  buyButtons.forEach(button => {
    button.addEventListener('click', function() {
      // 读取当前点击按钮的所有data属性
      const title = this.getAttribute('data-title');
      const cardId = this.getAttribute('data-id');
      const options = this.getAttribute('data-options');
      const price = this.getAttribute('data-price');
      const itemId = this.getAttribute('data-item_id');
      const itemType = this.getAttribute('data-item');
      
      // 保留你原来的表单生成逻辑
      const _form = document.createElement('form');
      // ... 这里继续写你的表单创建、填充内容、模态框展示等代码 ...
      
      // 如果确实需要给按钮设置ID（非必要，除非有特殊逻辑）
      this.id = cardId;
    });
  });
};

可选优化：事件委托（适合动态加载的卡片） #

如果你的卡片是通过AJAX动态添加的，上面的绑定方式可能失效，这时可以用事件委托——给父元素绑定一次事件，通过判断点击目标来处理逻辑，更高效且支持动态元素：

window.onload = function(){
  // 给卡片容器绑定事件委托
  document.querySelector('.cards').addEventListener('click', function(e) {
    // 判断点击的元素是否是购买按钮
    if(e.target.classList.contains('buy-product-btn')) {
      const button = e.target;
      // 读取data属性并执行表单逻辑，和上面一致
      const title = button.getAttribute('data-title');
      // ... 其他属性读取和表单生成代码 ...
    }
  });
};

内容的提问来源于stack exchange，提问作者Александр Сучков