帮助 jQuery 投票系统。无法更新 html 投票计数答案

【问题标题】：Help with jQuery voting system. Trouble updating html vote count帮助 jQuery 投票系统。无法更新 html 投票计数
【发布时间】：2009-10-29 13:42:34
【问题描述】：

我正在尝试创建一个类似 Stackoverflow 的投票系统，但遇到了一个小问题。

我有以下带有 jQuery onClick 事件的 HTML：

<div id="c_<%=Html.Encode(Model.C.cID) %>" class="votes">
    <img src="../../Content/gfx/Up.png" class="up" alt="" />
    <span class="votecount"><%= Html.Encode(Model.C.VoteCount)%></span>
    <img src="../../Content/gfx/Down.png" class="down" alt="" />
</div>

jQuery onClick 看起来像这样：

 $(".up").click(function() {
    var id = $(this).parent().attr("id").split("_");       
    if (id[0] == "c") {
        //C Vote
        //id[1] contains the id number.
        $.post("/Vote/CUp", { id: id[1] }, function(data) {
            $(this).parent().children(".votecount").html(data.voteCount);                
        },
            "json"
        );
    } else {
        //R Vote
        $.post("/Vote/RUp", { id: id[1] }, function(data) {
            $(this).parent().children(".votecount").html(data.voteCount);
        },
            "json"
        );
    };                        
});

我的问题在于尝试更新投票计数。我只是不知道如何使用 JSON 对象中返回的值更新投票范围。

JSON 对象正在返回数据，我已经使用 alert(data) 验证了这一点

非常感谢您的帮助。

【问题讨论】：

标签： c# jquery asp.net-mvc json voting

【解决方案1】：

在 $.post() 回调的范围内，this 将为您提供对 XMLHttpRequest 对象的引用，而不是引发早期点击事件的元素。

您可以将 this 分配给单击处理程序范围内的变量，并且它仍然可以在 $.post() 的回调中使用。像这样的：

$(".up").click(function() {
  var id = $(this).parent().attr("id").split("_");

  // Due to the awesome magic of closures, this will be available
  //  in the callback.  "el" is a weak name for the variable, you
  //  should rename it.
  var el = this;

  if (id[0] == "c") {
    //C Vote
    //id[1] contains the id number.
    $.post("/Vote/CUp", { id: id[1] }, function(data) {
        // siblings() is an easier way to select that.
        $(el).siblings(".votecount").html(data.voteCount);                
    }, "json");
  } else {
    //R Vote
    $.post("/Vote/RUp", { id: id[1] }, function(data) {
        $(el).siblings(".votecount").html(data.voteCount);
    }, "json");
  };                        
});

【讨论】：

【解决方案2】：

试试：

$(this).next(".votecount").html(data.voteCount);

【讨论】：

试过了.. .next(".votecount") 和 .prev(".votecount") 分别.. 唉，不高兴.. 但还是谢谢你的回应。跨度>
@Jeremy - 你试过$(this).siblings('.votecount').html(data.voteCount); 吗？
@karim79。今天试过了。没有运气。看来 $(this) 在 $.post 函数中不起作用。但话又说回来，我不太了解 jQuery，所以我可能错了。

【解决方案3】：

你总是可以尝试这样的：

<div id="c_<%=Html.Encode(Model.C.cID) %>" class="votes">  
    <img src="../../Content/gfx/Up.png" class="up" alt="" />  
    <span class="votecount" id="vc_<%=Html.Encode(Model.C.cID) %>">
        <%= Html.Encode(Model.C.VoteCount)%>
    </span>  
    <img src="../../Content/gfx/Down.png" class="down" alt="" />  
</div>

使用以下 jQuery：

 $(".up").click(function() {
    var id = $(this).parent().attr("id").split("_");       
    if (id[0] == "c") {
        //C Vote
        //id[1] contains the id number.
        $.post("/Vote/CUp", { id: id[1] }, function(data) {
            $("#vc_"+data.id).html(data.voteCount);                
        },
            "json"
        );
    } else {
        //R Vote
        $.post("/Vote/RUp", { id: id[1] }, function(data) {
            $("#vc_"+data.id).html(data.voteCount);
        },
            "json"
        );
    };                        
});

只需确保将 id 传递回 data json 对象中的 $.post() 函数即可。

注意我们可以调用的投票计数 div 中添加了一个唯一标识符。

【讨论】：