Hilfe mit jQuery Wahlsystem. Ärger Aktualisierung html Stimmenauszählung
-
10-07-2019 - |
Frage
Ich versuche, ein Stackoverflow wie Voting-System zu schaffen, und ich habe in ein kleines Problem laufen.
Ich habe folgenden HTML, die Ereignisse jQuery onClick verdrahtet hat:
<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>
Die jQuery onClick sieht wie folgt aus:
$(".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"
);
};
});
Mein Problem liegt bei dem Versuch, die Stimmenauszählung zu aktualisieren. Ich kann einfach nicht herausfinden, wie die votecount Spanne aktualisieren mit den im JSON-Objekt zurückgegebenen Werten.
Das JSON-Objekt, um Daten zurückkehrt, habe ich dies mit alert (Daten) verifiziert
Die Hilfe wird sehr geschätzt.
Lösung
Im Rahmen des $ .post () Rückruf, das geben Sie einen Verweis auf das XMLHttpRequest-Objekt, nicht das Element, das die frühere Klick Ereignis ausgelöst hat.
können Sie ordnen diese auf eine Variable im Rahmen des Click-Handler, und es wird nach wie vor in $ .post () 's Rückruf zur Verfügung. So etwas wie folgt aus:
$(".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");
};
});
Andere Tipps
Versuchen:
$(this).next(".votecount").html(data.voteCount);
Sie können immer versuchen, so etwas wie:
<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>
mit der folgenden 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"
);
};
});
Und so stellen Sie sicher, dass Sie die id
wieder passieren, dass Sie in die $ .post () übergeben Funktion in Ihrem data
Json-Objekt.
Beachten Sie die Hinzufügen einer eindeutigen Kennung an die Auszählung der Stimmen div, die wir nennen können.