点击Ban按钮触发AJAX时仅取首个隐藏输入uid值的问题如何解决

问题根源 #

1. HTML规范中id属性必须全局唯一，你通过循环生成了多个id="hidusr"的隐藏输入，当使用$("#hidusr")选择器时，jQuery永远只会返回第一个匹配该id的DOM元素，这是点击下方按钮始终拿到第一条uid的核心原因。
2. 你当前给a标签重复定义了class属性，属于语法错误，会导致部分样式不生效。

修复步骤 #

第一步：修改PHP生成的HTML结构

修正重复id、重复class的问题，同时给每条评论加统一的父容器，方便DOM节点查找：

<?php foreach ($comments as $comment) : ?>
<!-- 给每条评论加外层父容器 -->
<div class="comment-item">
    <a href="javascript:void(0);" class="banusr btn btn-info btn-link pull-right"> 
        <i class="fa fa-ban"></i> Ban
    </a>
    <!-- 把id换成class，避免重复id问题 -->
    <input type="hidden" class="hidden hidusr" name="uid" value="<?php echo trim(htmlspecialchars($comment['idauth'])) ?>" />
    <p><?php echo htmlspecialchars($comment['text']); ?></p>
</div>
<?php endforeach; ?>

第二步：重写jQuery事件绑定代码

不需要手动循环绑定点击事件，直接用jQuery的事件绑定方法，点击时相对于当前触发事件的按钮查找对应隐藏输入的值：

$(document).ready(function() {
    // 直接给所有banusr按钮绑定点击事件
    $(".banusr").on("click", function(e) {
        // 找当前点击的按钮的同层级hidusr元素，取value
        const uid = $(this).siblings(".hidusr").val();
        // 结构有变动时可以用父容器查找，兼容性更强：$(this).closest(".comment-item").find(".hidusr").val()
        $.ajax({
            method: "POST",
            url: "./ajax/ban.php?post",
            data: {
                usr_uid: uid
            }
            // 建议补充success、error回调处理操作结果
        });
    });
});

可选优化方案 #

不用额外加隐藏输入，直接把uid存到Ban按钮的自定义数据属性里，代码更简洁：
PHP部分调整：

<a href="javascript:void(0);" class="banusr btn btn-info btn-link pull-right" data-uid="<?php echo trim(htmlspecialchars($comment['idauth'])) ?>"> 
    <i class="fa fa-ban"></i> Ban
</a>

jQuery直接取值即可：

const uid = $(this).data('uid');

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