如何在Post-and-comment系统中使用JQueryclosest()

Question

我有一个帖子和评论系统。类似于facebook的帖子和评论系统。帖子显示正确，但评论仅显示在第一个帖子，即顶部显示的帖子。我可以在除第一篇帖子外的所有其他帖子上提交评论。我需要你帮助的问题如下：-每个帖子的评论都应该相应地显示。-能够为其他帖子提交评论。

这些就是我所做的。视图：

<div class="box-footer" style="display: block;">
<form id="com" class="com" method="post">
<div class="img-push">
<input type="hidden"  class="status_id" id="status_id" name="status_id" value="<?php echo $post['spid']; ?>">
<textarea  name="comment" id="comment" class="form-control input-sm comment" placeholder="Press enter to post comment"></textarea>
<div class="box-footer box-form">
<btn class="btn btn-azure btn-sm pull-right commentbt" id="commentbt">Comment</btn>
<ul class="nav nav-pills">
<li><i class="fa fa-bullhorn"></i></li>
</ul>
</div>
</div>
</form>
</div>
<?php endforeach;?>

Jquery：

$(document).ready(function(){
$(".commentbt").click(function(){
var comment = $(this).closest("div.img-push").find("input[name='comment']").val();
alert(comment);
});
});

我得到的只是"未定义"我需要得到输入字段和文本区域的值。感谢

Answer 1

最初，我可以注意到代码上的下一个错误：

1(您忘记关闭<div class="box-footer" style="display:block;">的div

2(输入元素的属性name是status_id，而不是comment

3(对多个元素使用相同的ID属性。

4(在JQuery上，我将通过按类匹配来代替对输入的搜索。此外，我还添加了文本区域值的搜索。

所以，尝试下一个修改：

PHP

<?php foreach ($statuspost as $post): ?>
<div class="box-footer" style="display:block;">
<form class="com" method="post">
<div class="img-push">
<input type="hidden" class="status_id" name="status_id" value="<?php echo $post['spid'];?>">
<textarea name="comment" class="form-control input-sm comment" placeholder="Press enter to post comment"></textarea>
<div class="box-footer box-form">
<btn class="btn btn-azure btn-sm pull-right commentbt">Comment</btn>
<ul class="nav nav-pills">
<li><i class="fa fa-bullhorn"></i></li>
</ul>
</div>
</div>
</form>
</div>
<?php endforeach:?>

JQuery

$(document).ready(function()
{
$(".commentbt").click(function()
{
var statusID = $(this).closest("div.img-push").find("input.status_id").val();
alert(statusID);
var comment = $(this).closest("div.img-push").find("textarea.comment").val();
alert(comment);
});
});