PHP循环生成重复ID的HTML元素如何修改并在jQuery中正确选择

1. ID调整方案可行性 #

你调整ID为id='postIdPay<?= $pst_id; ?>'的写法完全可行。
只要$pst_id变量本身是唯一值，且不含HTML ID规范禁止的特殊字符（空格、#、.、/等），生成的每个input元素ID都会全局唯一，完全符合HTML规范，可以彻底解决ID重复导致的jQuery选择异常、功能失效问题。

2. 调整后jQuery选中元素的方法 #

根据使用场景不同，有两种常用的选中方式：

场景1：已知对应$pst_id的具体值 #

直接拼接ID选择器即可：

// 假设已拿到pst_id的值存在变量pstId中
const targetInput = $('#postIdPay' + pstId);
// 后续可正常操作元素，比如取值
console.log(targetInput.val());

场景2：循环生成的关联元素触发操作时选中（最常用场景） #

你可以在同PHP循环内输出的操作元素（比如支付按钮）上，绑定自定义属性存储$pst_id，在事件回调中取值拼接选择器即可：

• 循环内PHP代码示例：

<input type="text" class='collapse' value='<?= $pst_id; ?>' id='postIdPay<?= $pst_id; ?>'>
<button class="pay-btn" data-pst-id="<?= $pst_id; ?>">发起支付</button>

• 对应jQuery代码：

$('.pay-btn').on('click', function() {
  // 从当前点击的按钮获取关联的pst_id
  const currentPstId = $(this).data('pst-id');
  // 拼接ID选择器选中对应input
  const $payPostInput = $('#postIdPay' + currentPstId);
  // 正常执行后续业务逻辑即可
})

可选优化方案 #

如果你不想处理ID字符串拼接，也可以不修改ID，直接通过自定义属性标识元素，实现同样的效果：

• 循环内PHP代码示例：

<input type="text" class='collapse post-pay-input' value='<?= $pst_id; ?>' data-pst-id="<?= $pst_id; ?>">

• 选中元素的jQuery代码：

const $payPostInput = $('.post-pay-input[data-pst-id="' + currentPstId + '"]');

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