具有捕获特定id值的评论回复系统

Question

大家好，我有一个博客帖子页面和评论和回复系统。一切都很好，除了一件事：

当我尝试添加对评论的回复时，我总是回复第一条评论。我认为我的错是我点击时无法达到具体的评论ID。这是我的html和ajax代码：

HTML CODE

    <div class="card" style=" margin-bottom:30px;">
    <div class="card-header">
        <a class="h3">@Model.Header</a>
        <br />
        <br />
        <div class="row">
            <div class="col-md-12 col-xs-12 col-xl-12">
                <p style="font-size:small">
                    <b>Kategori: </b> @Model.Category.CategoryName ,<b>Makale Sayısı :</b> @Model.Category.Articles.Count()
                    <b>Yorum Sayısı :</b> @Model.Comments.Count() <br />
                    <b>Yayımlanma Tarihi: </b> @String.Format("{0: d MMMM yyyy}", Model.Date) ,<b>Etiketler:</b><i class="fa fa-tags"></i> @Model.Tags.Count()


                </p>
                <p style="font-size:small;">
                    <img class="rounded-circle img-fluid" style="width:100px;height:100px;" src="@Model.User.Photo" alt="@Model.User.FullName" />
                    Posted by:
                    <a href="/User/UserProfile/@Model.User.UserId">@Model.User.UserName</a>
                </p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 col-xs-12 col-xl-12">
                <img id="articlephoto" style="width:100%; height:350px" class="rounded float-left" src="@Model.Photo" alt="Card image cap">
            </div>
        </div>
        <div class="row" style="margin-top:20px">
            <div class="col-md-12 col-xs-12 col-xl-12">
                <p>@Html.Raw(Model.Paragraph)</p>
                <p style="font-size:small">
                    <b>Etiketler:</b>
                    @foreach (var item in Model.Tags)
                    {
                    <span class="tag">@item.TagName,</span>
                    }
                </p>
            </div>
        </div>
    </div>
</div>


<h4>Comments</h4>
<hr />
@foreach (var item in Model.Comments.ToList())
{
    <!-- Single Comment -->
    <div class="media mb-4">
        <img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="@item.User.Photo" alt="@item.User.FullName">
        <div class="media-body" style="width:400px;">
            <h5 class="mt-0">@item.User.UserName</h5>
            <p style="word-break:break-all">
                @item.Paragraph
                @if (Convert.ToInt32(Session["UserId"]) == item.UserId)
                {
                    <a class="btn btn-danger"  href="/Home/DeleteComment/@item.CommentId">
                        Delete
                    </a>
                    <a class="btn btn-warning replybutton" href="#replyform">
                        Reply
                    </a>
                }
            </p>
            <p style="font-size:small"><b>Yorum Tarihi:</b>@String.Format("{0: d MMMM yyyy}", item.Date)</p>

            <span id="astar" class=""> @item.CommentId</span>

            @foreach (var reply in Model.ReplyComments.Where(x => x.CommentId == item.CommentId).ToList())
            {
                <div class="media mt-4">
                    <img style="height:40px; width:40px;" class="d-flex mr-3 rounded-circle" src="@item.User.Photo" alt="@item.User.FullName">
                    <div class="media-body">
                        <h5 class="mt-0">@reply.User.UserName</h5>
                        <p>@reply.Paragraph</p>
                        @if (Convert.ToInt32(Session["UserId"]) == item.UserId)
                        {
                            <a class="btn btn-danger" href="/Home/DeleteReply/@reply.ReplyCommentId">
                                Sil
                            </a>
                        }
                    </div>
                </div>
            }
        </div>
    </div>
    <hr />
}
@if (Session["UserId"] != null)
{
            <!-- Comments Form -->
    <div id="commentform" class="card my-4">
        <h5 class="card-header">Yorum Yap:</h5>
        <div class="card-body">
            <form>
                <div class="form-group">
                    <textarea id="comment" typeof="text" class="form-control" rows="3"></textarea>
                </div>
                <button type="submit" id="send" class="btn btn-primary">Yorum Yap</button>
            </form>
        </div>
    </div>
    <div id="replyform" class="card my-4 d-none">
        <h5 class="card-header">Cevap Yaz:</h5>
        <div class="card-body">

            <div class="form-group">
                <textarea id="replytext" name="replytext" typeof="text" class="form-control" rows="3"></textarea>
            </div>
            <button type="submit" id="reply" name="reply" class="btn btn-primary">Cevap Yaz</button>

        </div>
    </div>
}
else
{
    <div class="row" style="margin-bottom:30px;">
        <div class="col-md-6">
            <h3 class="alert- alert-heading">Yorum Yapabilmek İçin Üye Girişi Yapmalısınız.</h3>
        </div>
    </div>
}

和我的javascript ajax代码

    <script type="text/javascript">

     $(document).ready(function () {

        $("#reply").click(function (e) {

            var r_comment = $("#replytext").val();
            var r_commentid = parseInt($("#astar").html());

             $.ajax({
                 url: '/Home/ReplyComment/',
                 data: { replycomment: r_comment, articleid:@Model.ArticleId, commentid: r_commentid },
                type: 'POST',
                dataType: 'json',
                success: function (data) {
                    alert("Cevap gönderildi");
                    window.location.reload();

                }
            });



    });
    })
</script>

我的问题是，当我点击回复按钮时，我无法捕捉到特定的评论ID。我从<span id="astar" class=""> @item.CommentId</span>

获取了评论ID

Answer 1

“当我尝试添加对评论的回复时，我总是回复第一条评论。” - 这是因为你的所有评论都有相同的ID，而jQuery选择了第一个匹配的元素。

所有评论都需要具有唯一ID。我不知道循环的语言是什么，但你需要增加ID。所以astar-1，astar-2，astar-3等......

实施例

$(document).ready(function(){
  var valueBox = document.getElementById('value-box');
  $('.reply').on('click', function(){
    var comment = $(this).prev().attr('id');
    valueBox.innerHTML += '<br />Reply to comment: ' + comment;
    console.log(comment);
  });
});

.comment::after {
  display: table;
  content: ' ';
  clear: both;
 }

span {
  display: block;
  float: left;
  width: 45%;
}

.reply {
  display: block;
  float: right;
  width: 45%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment">
  <span id="comment-1">Yorum 1</span>
  <div class="reply">Cevapla</div>
</div>

<div class="comment">
  <span id="comment-2">Yorum 2</span>
  <div class="reply">Cevapla</div>
</div>

<div class="comment">
  <span id="comment-3">Yorum 3</span>
  <div class="reply">Cevapla</div>
</div>

<div id="value-box">
</div>