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

Question

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

hidusr = auth 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代码来管理这个，在点击禁止按钮，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然后点击禁止:Ajax response in Headers: usr_uid 9

但是如果我从下往上点击，例如:我按下禁止最后的评论("其他作者名称"， 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链接。使用this，我们可以选择下一个元素，它是一个input，相对于被点击的链接。

看到更多:

• https://learn.jquery.com/events/
• https://www.php.net/manual/en/control-structures.foreach.php

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

<?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")
}
});
});
});