2

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

我有以下带有 jQ​​uery 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) 验证了这一点

非常感谢您的帮助。

4

3 回答 3

2

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

您可以将它分配给单击处理程序范围内的变量，并且它仍然可以在 $.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");
  };                        
});
于 2010-01-01T21:34:11.770 回答
0

尝试：

$(this).next(".votecount").html(data.voteCount);
于 2009-10-29T13:48:03.813 回答
0

你总是可以尝试类似的东西：

<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"
        );
    };                        
});

并且只需确保将您传递给json 对象id中的 $.post() 函数的后面传递给您。data

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

于 2010-01-01T21:11:09.663 回答