为while循环内的每个隐藏输入实现唯一ID名的技术问题

嗨，我来帮你搞定这个问题！你遇到的核心问题是HTML里的id属性必须是唯一的，但你的while循环里每次都生成id="on"的隐藏输入框，所以当你用$("#on").val()获取值时，浏览器只会找到页面上第一个带这个id的元素，自然每次拿到的都是数据库第一行的ID啦。

下面给你两种修改方案，根据你的实际需求选就行：

方案一：简化逻辑，直接复用row_id（推荐） #

既然你的隐藏输入框存的value就是$row_id，那完全没必要额外通过DOM去获取它，直接把row_id当作on的值传给后端就行：

修改后的PHP循环代码： #

while(mysqli_stmt_fetch($stmt)): 
?>
<button class="btn btn-success btn-xs" onclick="InitTime(<?php echo $row_id; ?>)">Send</button> 
<!-- 这个隐藏框如果只是存row_id，其实可以删掉，不过要是后续有用可以保留，记得给唯一id -->
<input type="hidden" id="on-<?php echo $row_id; ?>" value="<?php echo $row_id; ?>"> 
<?php endwhile;

修改后的JS函数： #

function InitTime(row_id) { 
    var conf = confirm("Are you sure to execute " + row_id); 
    if (conf) { // 直接判断conf为true更简洁
        $.post("ajax/initializeTime.php", { row_id: row_id, on: row_id } ); 
    } 
}

方案二：给每个隐藏框生成唯一ID（如果隐藏框存的不是row_id时用） #

要是你的隐藏输入框以后会存其他值，那得给每个框生成唯一的id，比如用row_id拼接：

修改后的PHP循环代码： #

while(mysqli_stmt_fetch($stmt)): 
?>
<button class="btn btn-success btn-xs" onclick="InitTime(<?php echo $row_id; ?>, 'on-<?php echo $row_id; ?>')">Send</button> 
<input type="hidden" id="on-<?php echo $row_id; ?>" value="<?php echo $row_id; ?>"> 
<?php endwhile;

修改后的JS函数： #

function InitTime(row_id, elementId) { 
    var conf = confirm("Are you sure to execute " + row_id); 
    var on = $("#" + elementId).val(); 
    if (conf) { 
        $.post("ajax/initializeTime.php", { row_id: row_id, on: on } ); 
    } 
}

这样修改后，每次点击按钮都会对应到当前行的隐藏输入框，后端initializeTime.php就能拿到正确的ID啦！

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