Question

我正在开发一个项目，我的视图中有两个锚点（用于投票功能），

我有一个div，其中我有一个<ul>和3 <li>我有支持upvote，投票计数(in <h2>)和锚定downvote

我想要的功能，当我点击任何锚点，h2 html显示投票计数，我已经实现了功能，但由于

我无法做到这一点，这是我的观点

<div class="voting" style="margin-left:20px;">
                                        <ul>
                                            <li class="addvote"><a href="#" class="voteAnswer" answerid="@answer.AnswerID" name="Voted">
                                           Up</a></li>
                                            <li class="votecounter">
                                                <h2>
                                                    @answer.AnswerLikes.Where(a => a.IsActive == true).Count()</h2>
                                            </li>
                                            <li class="subvote"><a href="#" class="voteAnswer" answerid="@answer.AnswerID" name="Voted">
Down</a></li>
                                        </ul>
                                    </div>

这是我的JS

$(".voteAnswer").click(function (event) {
            var answerid = $(this).attr('answerid');
            var name = $(this).attr('name');
            var id = $(this).attr('id');
            var output = $(this);

                $.ajax({
                    url: ResourceAjaxUrl.VoteUnvoteTheAnswer,
                    type: "POST",
                    data: JSON.stringify({ answerID: answerid }),
                    dataType: "html",
                    contentType: "application/json; charset-utf-8",
                    success: function (Result) {
                        alert("Voted");
                        //  $(output).html("Voted (" + Result + ")");
                        $(output).closest("li").find("h2").html(Result);
                        $(output).attr("name", "Voted");
                    },
                    error: function (msg) {
                        alert("Unable to Vote answer: " + msg);
                    }
                });
event.preventDefault();
            });

我尝试过使用$(output).closest("li").find(".votecounter")，但仍无效

Answer 1

UL是最接近的共同祖先。

尝试：

$(output).closest("UL").find(".votecounter")

Answer 2

您的代码中存在一些问题。

这里

$(".voteAnswer").click(function (event) {

            var id = $(this).attr('id');

id

中没有属性.voteAnswer

以及如何区分upvote和downvote。

您必须检查anchor's父li代码class并检查它是否为upvote或down vote。

您也可以选择.votecounter

简单地通过

$(".votecounter").find("h2").html(Result);

或

$(output).closest("ul").find(".votecounter");

JQuery最近的方法来改变HTML

2 个答案: