C#asp.net MVC项目中我的投票系统出现问题。Idea基于StackOverflow投票系统

我正试图实现一个投票系统的答案后，就像StackOverflow。我能够执行ajax请求，所有内容都以所需的方式完美地存储在数据库中。但是我的

视图面临一个问题。在我看来，所有
答案
的
Html
都是用一个
for
循环呈现的。在这个
Html
元素中，我使用
jQuery
通过
div
类
vote
选择
answer
，并执行ajax调用和更新投票计数。但问题是，当我投票给一个答案时，不是只增加它的票数，而是同时增加所有答案的票数。
我认为选择所有的
div
和
vote
类
名称是错误的。但是，我无法找到一种方法来单独选择它们，从而仅在所选答案上增加我的
VoteCount
。
这是我的
视图
代码

@model AskMe.Models.ViewModel.QuestionDetailViewModel

@{
    ViewBag.Title = "QuestionDetails";
}

<h1>Question Details: </h1>
<h3>@Model.question.Post.Title</h3>
@Html.Raw(Model.question.Post.Content)
<hr />
<h3>Answers:</h3>
<div id="paginationContainer">
    @foreach (var answer in Model.question.Answers)
    {
        <div class="card bg-light m-1">
            <div class="card-body">
                <h5 class="card-title">Answered by: @answer.Post.CreatedBy.UserName</h5>
                @Html.Raw(answer.Post.Content)
            </div>
            <div class="col vote">
                <div>
                    <button data-vote-id="@answer.Post.PostId" class="nav-link thumbs-up" href=""><i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
                </div>
                <div class="Count">
                    @(answer.Post.UpVotes.Count-answer.Post.DownVotes.Count)
                </div>
                <div>
                    <button data-vote-id="@answer.Post.PostId" class="nav-link thumbs-down" href=""><i class="fa fa-thumbs-down" aria-hidden="true"></i></button>
                </div>
            </div>
            @Html.ActionLink("View Comments", "Index", "Comments", new { answerId = answer.PostId }, null) |
        </div>
    }
</div>
@using (Html.BeginForm())
{

    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h3>Contribute your answer: </h3>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(m => m.AnswerContent, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextAreaFor(m => m.AnswerContent, new { @class = "form-control" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                @Html.HiddenFor(m => m.UserId)
                @Html.HiddenFor(m => m.QuestionId)
                @Html.HiddenFor(m => m.question)
                <input type="submit" value="Contribute now" class="btn btn-outline-primary" />
            </div>
        </div>
    </div>
}
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval");

    <script type="text/javascript">
        $(document).ready(function () {
            tinyMCE.init({
                mode: "textareas",
            });
            $('#paginationContainer').buzinaPagination({
                itemsOnPage: 3,
                prevnext: true,
                prevText: "Previous",
                nextText: "Next"
            });

            $(".vote").on("click", ".thumbs-up", function () {

                $.ajax({
                    url: "/api/votes/upvote/" + $(this).attr("data-vote-id"),
                    method: "POST",
                    success: function () {
                        var countTxt = $(".Count").text();
                        console.log(countTxt);
                        var count = parseInt(countTxt);
                        $(".Count").text(count + 1);
                        console.log(count);
                    }
                })
            })

            $(".vote").on("click", ".thumbs-down", function () {

                $.ajax({
                    url: "/api/votes/downvote/" + $(this).attr("data-vote-id"),
                    method: "POST",
                    success: function () {
                        var countTxt = $(".Count").text();
                        console.log(countTxt);
                        var count = parseInt(countTxt);
                        $(".Count").text(count - 1);
                        console.log(count);
                    }
                })
            })
        });
    </script>
}


您正在选择并设置所有
.Count
元素，直到我在中看到为止

var countTxt = $(".Count").text();
...
$(".Count").text(count - 1);

而我们应该只处理那些与当前答案相关的
.Count
元素

它可以通过+选择器完成

谢谢，@EugenePodskal指出我的错误，并为我指明解决问题的正确方向。这是问题的答案

$(".vote").on("click", ".thumbs-up", function () {
                var counter = $(this).closest(".vote").children(".Count");
                $.ajax({
                    url: "/api/votes/upvote/" + $(this).attr("data-vote-id"),
                    method: "POST",
                    success: function () {
                        var countTxt = counter.text();
                        console.log(countTxt);
                        var count = parseInt(countTxt);
                         counter.text(count + 1);
                        console.log(count);
                    }
                })
            })

再次感谢@EUgenePodskal为您提供的帮助和时间。
看起来还可以，问题可能出在api代码中。您可以查看开发人员工具中的“网络”选项卡。查看它每次单击发出的请求数。它每次单击发出一个XHR请求。它也在不同的答案上发送不同的Id。所以，如果把事情搞砸了，那就是你的api实现了。请分享您如何更新数据库的详细信息。感谢您的回答，我实现了您的解决方案，但它给出了一个错误
4:163未捕获类型错误：无法读取行
var countTxt=$element.children（.Count”）[0]上未定义的
的属性'text'
@AbhijeetBrahmbhatt已修复-
此
与
处于同一级别。Count
，因此
子项（）
不起作用。仍然是相同的问题。但好的是现在，通过刷新页面，选票会根据需要进行更改，并且计数不会影响其他答案的选票计数。由于
4:163未捕获类型错误：无法读取未定义的属性“text”
@AbhijeetBrahmbhatt的属性“text”，因此计数的即时更改不起作用，现在它可能会起作用-不幸的是，今晚我似乎有点不注意细节。很抱歉，延迟的答复不在城里。在祖先解决方案中，错误为
4:173未捕获类型错误：$（…）。祖先不是函数。经过一些研究，我找到了如何选择祖先的解决方案！！。我在这里附上一个解决方案。谢谢你给我指引了正确的方向@尤金·波德斯卡尔。
var $count = $(this).ancestor(".vote").children(".Count")[0];
$.ajax({  
    url: "/api/votes/downvote/" + $(this).attr("data-vote-id"),
    method: "POST",
    success: function () {
        var countTxt = $count.text();
        ...
        $count.text(count - 1);


$(".vote").on("click", ".thumbs-up", function () {
                var counter = $(this).closest(".vote").children(".Count");
                $.ajax({
                    url: "/api/votes/upvote/" + $(this).attr("data-vote-id"),
                    method: "POST",
                    success: function () {
                        var countTxt = counter.text();
                        console.log(countTxt);
                        var count = parseInt(countTxt);
                         counter.text(count + 1);
                        console.log(count);
                    }
                })
            })