我的 ajax 代码仅从一组隐藏输入中获取一个值

Question

所以基本上我有这个 html 文档，由 php 代码 (foreach) 动态生成，提取不同评论的行（每个作者有不同的用户 ID），我存储了 cid（评论的id）和uid（评论作者的用户id）在一组隐藏输入中：

hidusr = 授权 ID

<?php foreach ($comments as $comment) : ?>

                                    

                                    <a href="javascript:void(0);" class="banusr"
                                        class="btn btn-info btn-link pull-right "> <i class="fa fa-ban"></i>
                                        Ban</a>

                                    <input type="hidden" class="hidden" id="hidusr" name="uid"
                                        value="<?php echo trim(htmlspecialchars($comment['idauth'])) ?>" />
                                <p><?php echo htmlspecialchars($comment['text']); ?></p>
        <?php endforeach; ?>

所以网页中的结果是这样的：

<a href="utenti.php?id=2"> Author Name  </a>
    <a href="javascript:void(0);" class="banusr"  class="btn btn-info btn-link pull-right "> <i class="fa fa-ban"></i>
                                            Ban</a>
                                      
     <input type="hidden" class="hidden" id="hidusr" name="uid" value="2" />

<a href="utenti.php?id=9"> Other Author Name  </a>
    <a href="javascript:void(0);" class="banusr"  class="btn btn-info btn-link pull-right "> <i class="fa fa-ban"></i>
                                            Ban</a>
                                      
     <input type="hidden" class="hidden" id="hidusr" name="uid" value="9" />

现在我有一些 javascript/jquery 代码来管理这个，在单击 Ban 按钮时，ajax 获取 hidusr 参数（因此该评论的作者）并将请求发送到 php 禁止该用户的页面，摘录：

$(document).ready(function() {
    bans = $(".banusr");

        for (var i = 0; i < bans.length; i++) {

            ban = bans[i];

            ban.onclick = function(e) {

                    uid = $("#hidusr").val();

                    $.ajax({
                        method: "POST",
                        url: "./ajax/ban.php?post",
                        data: {
                            
                            usr_uid: uid
                        }
});

但不知道为什么，如果你在评论区开始从上到下禁止用户，没关系，代码取正确的id。

所以我从上开始首先禁止： Ajax 在 Headers 中的响应： usr_uid: 2 然后我下去，点击ban: Ajax response in Headers: usr_uid 9

但是，如果我从下方单击，例如：我按 Ban 以获取最后一条评论（“其他作者姓名”，hidusr：9）Ajax Headers 中的响应：usr_uid 2

任何人都知道如何解决这个问题，在此先感谢

Answer 1

首先，考虑您的 PHP 如何构建页面。它正在为 HTML 设置 ID，因此您的循环应该创建唯一 ID。

<?php 
$i = 1;
foreach ($comments as $comment) {
?>
<a href="#" class="banusr" class="btn btn-info btn-link pull-right ">
  <i class="fa fa-ban"></i> Ban
</a>
<input type="hidden" class="hidden" id="hidusr-<?php echo $i; ?>" name="uid[]" value="<?php echo trim(htmlspecialchars($comment['idauth'])) ?>" />
<p><?php echo htmlspecialchars($comment['text']); ?></p>
<?php
$i++;
}
?>

现在每个 ID 都是唯一的：hiduser-1、hiduser-2 等...

我还更新了 name 属性，以便在提交表单时收集所有这些，name="uid[]"。

现在您的 HTML 看起来像：

<a href="#" class="banusr" class="btn btn-info btn-link pull-right ">
  <i class="fa fa-ban"></i> Ban
</a>
<input type="hidden" class="hidden" id="hidusr-1" name="uid[]" value="2" />
<a href="#" class="banusr" class="btn btn-info btn-link pull-right ">
  <i class="fa fa-ban"></i> Ban
</a>
<input type="hidden" class="hidden" id="hidusr-2" name="uid[]" value="9" />

所以现在我们可以看看 JavaScript。

$(function() {
  $(".banusr").click(function(event){
    event.preventDefault();
    var uid = $(this).next("input").val();
    $.ajax({
      method: "POST",
      url: "./ajax/ban.php?post",
      data: {
        usr_uid: uid
      }
    });
  });
});

由此，我们将 click 事件回调绑定到所有 Ban link。使用 this，我们可以 select 下一个 input 元素，相对于被单击的 link。

查看更多：

在我看来，似乎没有必要在 input 中隐藏 ID。我只是将它放在 Link 本身。

<?php 
foreach ($comments as $comment) {
?>
<a href="<?php echo trim(htmlspecialchars($comment['idauth'])) ?>" class="banusr" class="btn btn-info btn-link pull-right ">
  <i class="fa fa-ban"></i> Ban
</a>
<p><?php echo htmlspecialchars($comment['text']); ?></p>
<?php
}
?>

然后您可以简单地计算 jQuery:

$(function() {
  $(".banusr").click(function(event){
    event.preventDefault();
    $.ajax({
      method: "POST",
      url: "./ajax/ban.php?post",
      data: {
        usr_uid: $(this).attr("href")
      }
    });
  });
});

我的 ajax 代码仅从一组隐藏输入中获取一个值

My ajax code get only one value from a group of hidden inputs

html

php

ajax

jquery

dom