如何显示所有帖子的评论

Question

我有一个帖子和评论系统。类似于 facebook 的帖子和评论系统。帖子显示正常，我可以对所有帖子发表评论。但是 cmets 仅显示第一个帖子，即显示在顶部的帖子。 . 我需要您帮助的问题如下： -每个帖子的cmets应该对应显示。

这些是我所做的。 查看：

  <div class="box box-widget">
                <div class="box-header with-border">
                  <div class="user-block">

                    <span class="description">Shared publicly - <?php echo time_ago($post['post_date'])?></span>

                  </div>
                </div>

                <div class="box-body" style="display: block;">
                  <img class="img-responsive show-in-modal" src="<?php echo base_url('post_file/'.$post['post_image'])?>" alt="">
                  <input type="hidden" id="stid" value="<?php echo $post['spid']; ?>">
                  <p><?php echo $post['postcontent']?></p>
                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-share"></i> Share</button>
                  <div>

                  <input type="hidden" id="pl_postid" name="pl_postid" value="<?php echo $post['spid']; ?>">

                  <button type="button" class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button>
                 </div>
                  <span class="pull-right text-muted"><?php //echo $countlikes ?> likes - 3 comments</span>

                </div>
                  <div id="display_comment"></div>
                <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>

              </div>
              <?php endforeach;?>

jquery：

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

        var dataString = 'status_id='+ status_id +'&comment='+ comment;
        if(comment==''||status_id==''){
            alert('Can not send empty comment')
        }
        else{
            $('#display_comment').show();
            //$("#display_comment").fadeIn(100).html('<img src="<?php //echo base_url();?>uploads/ajax-loader.gif" />Loading Comment...');
            $.ajax({
               type:"POST",
               url:"<?php echo site_url('user/postcomment')?>",
               data:dataString,
               cache:false,
             success: function () {
         $(document).ready(function(){
        var status_id = $("#stid").val();
        $.post('<?php echo site_url('user/getcomments');?>',
        {
            status_id:status_id
        },
        function(data){
            $("#display_comment").html(data);
        });
    });


                    $('#com')[0].reset();
                }
            });
        }return false;
    });
});

谢谢

Answer 1

HTML 修复：

不要在不同的元素上使用相同的ID，就像使用display_comment 一样。您正在使用 foreach 循环创建一组帖子，因此这将创建具有相同 ID 的多个元素。请改用自定义类。 请记住具有相同ID 的项目不应超过一项。固定的元素是下一个：

<input type="hidden" id="stid" value="<?php echo $post['spid'];?>">

<input type="hidden" id="pl_postid" name="pl_postid" value="<?php echo $post['spid']; ?>">

<div id="display_comment"></div>

<form id="com" class="com" method="post">

<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>

<btn class="btn btn-azure btn-sm pull-right commentbt" id="commentbt">Comment</btn>

由于您要创建多个box-widget，因此前面的元素将生成多个具有相同ID 的元素。固定的代码会是这样的：

<div class="box box-widget">

  <div class="box-header with-border">
    <div class="user-block">
      <span class="description">Shared publicly - <?php echo time_ago($post['post_date'])?></span>
    </div>
  </div>

  <div class="box-body" style="display:block;">
    <img class="img-responsive show-in-modal" src="<?php echo base_url('post_file/'.$post['post_image'])?>" alt="">
    <input type="hidden" class="stid" value="<?php echo $post['spid'];?>">
    <p><?php echo $post['postcontent']?></p>
    <button type="button" class="btn btn-default btn-xs">
      <i class="fa fa-share"></i> Share
    </button>
    <div>
      <input type="hidden" class="pl_postid" name="pl_postid" value="<?php echo $post['spid']; ?>">
      <button type="button" class="btn btn-default btn-xs">
        <i class="fa fa-thumbs-o-up"></i> Like
      </button>
    </div>
    <span class="pull-right text-muted"><?php //echo $countlikes ?> likes - 3 comments</span>
  </div>

  <div class="display_comment"></div>

  <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>

</div>

JQUERY 修复：

1) 本节的主要问题是您以ID 定位元素，并且您有多个具有相同ID 的元素，因此您可能只定位第一个带有出现在 HTML 上的 ID 的元素。那么，如何进行呢？尝试通过它们与单击按钮的关系来查找元素，就像您使用的方法一样：

var status_id = $(this).closest("div.img-push").find("input[name='status_id']").val();

2) 另一个问题是在 ajax 调用中使用 $(document).ready()，该问题已被删除。

一个固定的代码应该是这样的：

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

    alert(comment);

    var dataString = 'status_id=' + status_id + ' &comment=' + comment;

    if (comment == '' || status_id == '')
    {
        alert('Can not send empty comment')

        // Finish function here if error detected!
        return;
    }

    // The next line was fixed!
    //$('#display_comment').show();
    var dComment = $(this).closest(".box-widget").find(".display_comment");
    dComment.show();

    // The next line was also wrong (Homework for you...)
    //$("#display_comment").fadeIn(100).html('<img src="<?php //echo base_url();?>uploads/ajax-loader.gif" />Loading Comment...');

    // Save clicked button object, we going to need it inside the ajax.
    var clickedBtn = $(this);

    $.ajax({
        type: "POST",
        url: "<?php echo site_url('user/postcomment')?>",
        data: dataString,
        cache: false,
        success: function()
        {
            // Wrong again, the next line was fixed!!
            //var status_id = $("#stid").val();
            var status_id = clickedBtn.closest(".box-widget").find("input.stid").val();

            console.log("Getting comments for status_id = " + status_id);

            $.post(
                "<?php echo site_url('user/getcomments');?>",
                {status_id: status_id},
                function(data)
                {
                   // Wrong again! Fixed!
                   //$("#display_comment").html(data);
                   dComment.html(data);
                }
            );

            // Another error, guess what...
            //$('#com')[0].reset();
            clickedBtn.closest("form.com").reset();
        }
    });
});

最后，我不得不说，我真的怀疑你的代码在 毕竟我做了所有的改变，但我希望至少你 了解您所犯的主要问题。