在 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，这将使每个都唯一

                                <div class="reaction">

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

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

                                </div>

在你的js中通过添加id来更改选择器

function sendVote(postId, isUpVote) {

    var json = { postId: postId, isUpVote: isUpVote };

    $.ajax({

        url: "/api/votes",

        type: "POST",

        data: JSON.stringify(json),

        contentType: "application/json; charset=utf-8",

        dataType: "json",

        success: function (data) {

            $("#upVotes_"+postId).html(data.upVotes); // change here

            $("#downVotes_"+postId).html(data.downVotes);

        }

    });

}

并且对于 myform 也做同样的事情，您不需要表单的 id，但如果您只想将 @post.Id 添加到 id，

<form id="myForm" class="myform" asp-controller="Comment" asp-action="Create" method="post">

                                        <input type="hidden" name="PostId" id="postId" value="@post.Id" />

                                        <textarea name="text"></textarea>

                                        <input type="submit" value="Submit Comment" />

                                    </form>

如果将 id 更改为 class 以使其动态，

 $('.myForm').each.ajaxForm(function () {

            // $(this)  will give you access to the specific form only

                alert("You have just posted a comment");

                document.location.reload(true);

            });