Aide avec le système de vote jQuery. Problème de mise à jour du nombre de votes html

Question

J'essaie de créer un Stackoverflow comme un système de vote, et j'ai rencontré un léger problème.

J'ai le code HTML suivant qui a les événements jQuery onClick qui lui sont connectés:

<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 ressemble à ceci:

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

Mon problème consiste à essayer de mettre à jour le nombre de votes. Je ne peux tout simplement pas savoir comment mettre à jour la plage de votecount avec les valeurs renvoyées dans l'objet JSON.

L'objet JSON renvoie des données, j'ai vérifié cela à l'aide d'une alerte (données)

L’aide est très appréciée.

Answer 1

Dans la portée du rappel $ .post (), this vous donnera une référence à l'objet XMLHttpRequest, pas à l'élément qui a déclenché l'événement de clic précédent.

Vous pouvez affecter this à une variable dans la portée du gestionnaire de clics et elle sera toujours disponible dans le rappel de $ .post (). Quelque chose comme ça:

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

Essayez:

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

Answer 3

Vous pouvez toujours essayer quelque chose comme:

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

avec le jQuery suivant:

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

Et assurez-vous simplement de renvoyer le id que vous avez transmis à la fonction $ .post () dans votre objet data json.

Notez l'ajout d'un identifiant unique au div du nombre de votes auquel nous pouvons appeler.