如何在帖子和评论系统中使用 JQuery 最接近（）

Question

我有一个帖子和评论系统。类似于 facebook 的帖子和评论系统。帖子显示正确，但 cmets 仅显示第一个帖子，即显示在顶部的帖子。我能够对除第一篇文章之外的所有其他文章发表评论。 我需要您帮助的问题如下： - 每个帖子的 cmets 应相应显示。 - 能够为其他帖子提交 cmets。

这些是我所做的。 查看：

                <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 的关闭<div class="box-footer" style="display:block;">

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

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

4) 在 JQuery 上，我将通过按类匹配来替换输入的搜索。另外，我也添加了 textarea 值的搜索。

所以，尝试下一个修改：

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