在 Foreach 循环中调用 JQuery Ajax 函数 - 需要帮助

Question

我目前正在学习编程并尝试使用.Net Core 构建一个网站。我有以下问题。我对 JavaScript 不太熟悉，并且我的索引页面上有两个 JQuery/AJAX 函数。其中一个功能是帖子喜欢/不喜欢，另一个功能是帖子评论。

我的 ViewModel 包含一系列帖子：

    public IEnumerable<IndexPostViewModel> Posts { get; set; }

    public int PagesCount { get; set; }

    public int CurrentPage { get; set; }

在我看来，我正在循环浏览每一篇文章以及其中的每一条评论。

@foreach (var post in Model.Posts)

                    {

                        <div class="post-content">

                            <img src=@post.ImageUrl width="500" height="500" alt="post-image" class="img-responsive post-image" />

                            <div class="post-container">

                                <img src="http://placehold.it/300x300" alt="user" class="profile-photo-md pull-left" />

                                <div class="post-detail">

                                    <div class="user-info">

                                        <h5><a href="timeline.html" class="profile-link">@post.User.UserName</a> <span class="following">following</span></h5>

                                        <p class="text-muted">Post published at: @post.CreatedOn</p>

                                    </div>

                                    <div class="reaction">

                                        <a class="btn text-green" href="#" method="post" onclick="sendVote(@post.Id, true)"><div class="icon ion-thumbsup" id="upVotes">@post.UpVotes</div></a>

                                        <a class="btn text-red" href="#" method="post" onclick="sendVote(@post.Id, false)"><div class="fa fa-thumbs-down" id="downVotes">@post.DownVotes</div></a>

                                    </div>

                                    <div class="line-divider"></div>

                                    <div class="post-text">

                                        <p>@post.Text</p>

                                    </div>

                                    <div class="line-divider"></div>

我的问题是，这两个功能仅在第一篇文章中才能正常工作。您能否协助了解如何修改要应用于循环中每个元素的函数？

Answer 1

问题很简单。你的选择器和 id 不是唯一的id 只能为一个元素定义，多个/相同元素上的相同 id 会导致此问题。链接标签对所有记录都有一个共同的 ID，它必须是唯一的。使 ids 唯一，我添加了 @post.Id 和 ids，这将使每个都唯一&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="reaction">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="btn text-green" href="#" method="post" onclick="sendVote(@post.Id, true)"><div class="icon ion-thumbsup" id="[e-mail]">@post.UpVotes</div></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="btn text-red" href="#" method="post" onclick="sendVote(@post.Id, false)"><div class="fa fa-thumbs-down" id="[e-mail]">@post.DownVotes</div></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>在你的js中通过添加id来更改选择器function sendVote(postId, isUpVote) {&nbsp; &nbsp; var json = { postId: postId, isUpVote: isUpVote };&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url: "/api/votes",&nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; data: JSON.stringify(json),&nbsp; &nbsp; &nbsp; &nbsp; contentType: "application/json; charset=utf-8",&nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#upVotes_"+postId).html(data.upVotes); // change here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#downVotes_"+postId).html(data.downVotes);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}并且对于 myform 也做同样的事情，您不需要表单的 id，但如果您只想将 @post.Id 添加到 id，<form id="myForm" class="myform" asp-controller="Comment" asp-action="Create" method="post">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" name="PostId" id="postId" value="@post.Id" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea name="text"></textarea>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" value="Submit Comment" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>如果将 id 更改为 class 以使其动态，&nbsp;$('.myForm').each.ajaxForm(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // $(this)&nbsp; will give you access to the specific form only&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("You have just posted a comment");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.location.reload(true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });