Помогите с системой голосования jQuery. Проблема обновления html подсчета голосов

Question

Помогите с системой голосования jQuery. Проблема обновления html подсчета голосов

Я пытаюсь создать Stackoverflow, подобный системе голосования, и столкнулся с небольшой проблемой.

У меня есть следующий HTML, к которому подключены события jQuery onClick:

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

OnClick 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) {

            $(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"

        );

    };                        

});

Моя проблема заключается в попытке обновить подсчет голосов. Я просто не могу понять, как обновить votecount span с помощью значений, возвращаемых в объекте JSON.

Объект JSON возвращает данные, я проверил это с помощью alert (data)

Помощь очень ценится.

493 3

jQuery c#asp.net-mvc json voting

3 ответов:

Comments

Ничего не найдено.

Dave Ward · Accepted Answer · 2010-01-01 23:34:11

В области $.post() callback, это даст вам ссылку на объект XMLHttpRequest, а не на элемент, который вызвал предыдущее событие click.

Вы можете назначить Эту переменную в области обработчика кликов, и она по-прежнему будет доступна в $.обратный вызов 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");
  };                        
});

karim79 · Accepted Answer · 2009-10-29 15:48:03

Попробуйте:

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

mynameiscoffey · Accepted Answer · 2010-01-01 23:11:09

Вы всегда можете попробовать что-то вроде:
<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, который вы передали в $.функция post () в вашем объекте data json.
Обратите внимание на добавление уникального идентификатора к div подсчета голосов, к которому мы можем обратиться.