jQuery 투표 시스템에 대한 도움말. 문제 : html 투표 수를 업데이트하는 중

Question

투표 시스템과 같은 Stackoverflow를 만들려고하고 있는데 약간의 문제가 있습니다.

이

<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와 온 클릭은 다음과 같습니다 :

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

내 문제가 당첨 기회를 업데이트하려고에있다

나는 그것에 유선 jQuery를 온 클릭 이벤트가 다음과 같은 HTML이있다. 방금 JSON 객체에 반환 된 값으로 보텀 스팬을 업데이트하는 방법을 알아낼 수 없습니다.

json으로 개체가 반환하는 데이터는,이 사용 경고 (데이터)

도움이 많이 감사를 확인했습니다.

Answer 1

$ .post() 콜백 범위에서 이은 이전 클릭 이벤트를 발생시킨 요소가 아니라 XMLHttpRequest 객체에 대한 참조를 제공합니다.

을 클릭 핸들러의 범위에있는 변수에 할당 할 수 있으며 $ .post()의 콜백에서 계속 사용할 수 있습니다. 이런 식으로 뭔가 : (". votecount")

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

Answer 2

시도 : 다음 jQuery를 함께

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

:

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

Answer 3

당신은 항상 뭔가를 시도 할 수

$(".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에 고유 한 식별자를 추가하는 것에 유의하십시오.