Question

我有一个帖子和评论系统。诸如Facebook帖子和评论系统之类的东西。帖子显示正确，我可以对所有帖子发表评论。但是评论仅显示在第一条帖子上，即顶部显示的帖子。。我需要您协助的问题如下： -每个帖子的评论应相应显示。

这些是我所做的。查看：

let newPerson = new Person(person);
newPerson
  .save()
  .then(storedPerson => resolve(storedPerson))
  .catch(err => reject(err));

jQuery：

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

谢谢

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

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

显示所有帖子的评论

1 个答案: