1. Ich stieß auf die Produktbewertungsseite des Projekts, die die Sternbewertung des Produkts enthielt. Zu dieser Zeit habe ich gerade den Effekt aufgeschrieben (dh der Benutzer klickte auf ein paar Sterne, um ein paar helle zu zeigen).
Als ich die Seite machte und sie an meinen Backend -Kollegen übergab, sagte er, es sei bedeutungslos für mich, dies zu tun, und er könne es nicht tun. Zu dieser Zeit war mein Verstand ein wenig verwirrt.
Später sagte mein Kollege im Backend, dass er Ärger machen würde. Wie konnte er als sonniger junger Mann im 21. Jahrhundert seine Kollegen ihm helfen lassen, seine Aufgaben zu erledigen?
Durch den Rat meiner Kollegen und meine eigene Erkundung habe ich die Beziehung hier endlich verstanden. Jetzt werde ich erklären, wie man dieses Programm schreibt und welche Operationen durch meine eigenen Worte ausgeführt werden sollen.
A, das Bild ist oben:
B: Das obige Bild überprüfte eines der 5 Lichter und die anderen 4 Lichter. Was macht es so? Siehe das Bild unten:
Ja, ja, die Anzahl der beleuchteten Sterne im Startstern liegt an Daten
C: Jetzt können wir über diese Daten sprechen, aber was sind diese Daten?
Es stellt sich heraus, dass das Front-End und das Back-End darauf hingewiesen wurden, wo Daten gespeichert sind (Sie können ihm einen Namen Tada oder Tdat geben). Das Back-End kann ihm Werte zuweisen, und die Daten entsprechen so vielen Sternen wie sie. Aber warum brauchen Sie diese Daten?
Es ist Jiang Zi: Wenn der Benutzer A -Klick auf den Stern ist, kann er an Benutzer B -Benutzer C -Benutzer d ... angezeigt werden, sodass die Anzahl der vom Benutzer geklickten Sterne an einem bestimmten Ort (dh Daten) gespeichert (zugewiesen) gespeichert (zugewiesen) wird, damit der Hintergrund dies erhalten kann.
Das heißt, das Front-End weist Werte zu, das Back-End nimmt Werte und das Back-End speichert die erhaltenen Daten in der Datenbank und weist sie anschließend in Daten zu, um die Anzahl der positiven Sterne anzuzeigen, die Benutzer A bewertet haben.
Front-End-Zuordnung ------》 Back-End-Wert-》 Back-End-Speicherdaten-》 Back-End-Feedback zum Front-End basierend auf den gespeicherten Daten-》 Die Front-End zeigt entsprechende Effekte auf der Seite basierend auf dem Datenfeedback von hinten-》》
OK, wenn Sie die Logik verstehen, können Sie das Programm schreiben:
$ ('. evaluate_mark'). Jede (function () {var star = $ (this) .find ('. U-Grade'). attr ('Daten'); // Daten abrufen ist 5 und der andere ist 4/*alarm (stern)*/$ (dieses). div '). Jede (Funktion (i, ele) {// ELEs aktuelles Element, das Index des i aktuellen Elements if (i <star) { / *alert (i); * / / *alert (ele); * /$ (ele) .addclass (' hell ');}});Der obige Code ist relativ einfach. Iterieren Sie zuerst und finden Sie die div unten.
Entfernen Sie nach dem Finden alle Lichter (Licht ist die Klasse, die die Sterne in CSS beleuchtet) und durchqueren Sie dann das U-Grada_item. Star hat den Datenwert erhalten und basierend auf i <star beurteilt.
Dies zeigt die Anzahl der Helligkeit der Sterne, dh, das erste Bild oben, ist hell, einer ist hell, der eine hell, der eine hell und der eine hell und der andere hell und der andere ist hell und die andere ist hell und die andere ist hell und die Nummer ist hell und die Nummer ist hell und ist hell.
4.1: Zu diesem Zeitpunkt haben wir die Back-End-Zuordnung und den Front-End-Leistungseffekt abgeschlossen. Zu dieser Zeit sind noch zwei Teile übrig.
Einer ist der Teil, an dem der Benutzer klickt, um den Effekt zu erzeugen, und der andere soll den Wert des Benutzers zuweisen, der auf den aktuellen Stern auf den Daten klickt (lassen Sie das Backend den Wert speichern und den Wert neu zuweisen und anzeigen).
4.2: Lassen Sie uns Folgendes ausführen, um den Effekt von Benutzerklicks anzuzeigen
$ (function () {$. setgrad = function ($ ele, index) {var $ item = $ ele.find (". U-Grade_Item"); $ item.removeclass ("light"); .u-grade_item "); Element/ *Alert (Index);A: Ich werde nacheinander nicht über die Code -Implementierung sprechen. Sie können die Kommentare lesen. Auf diese Weise klickt der Benutzer, um den Effekt zu erzeugen. Es gibt nur den letzten unten. Weisen Sie den Wert des vom Benutzer geklickten Sterns zu.
Es ist leicht, klar zu machen:
(function () {var $ item = $ (". u-Grade .u-grade_item"); Datenwert $ .setgrade ($ this.Parent (), Index);Okay, der gesamte Inhalt dieses Artikels wurde eingeführt. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!