1. Encontré la página de evaluación del producto en el proyecto, que contenía la evaluación STAR del producto. En ese momento, acabo de escribir el efecto (es decir, el usuario hizo clic en algunas estrellas para mostrar algunas brillantes).
Cuando hice la página y se la entregué a mi colega de backend, dijo que no tenía sentido para mí hacer esto y que no podía hacerlo. En ese momento, mi mente estaba un poco confundida.
Más tarde, mi colega en el backend dijo que causaría problemas. Como joven soleado en el siglo XXI, ¿cómo podría dejar que sus colegas lo ayuden a completar sus tareas?
A través del consejo de mis colegas y mi propia exploración, finalmente entendí la relación aquí. Ahora explicaré cómo escribir este programa y qué operaciones deben hacerse a través de mis propias palabras.
A, la imagen está arriba:
B: La imagen de arriba revisó una de las 5 luces y las otras 4 luces. ¿Qué lo hace así? Vea la imagen a continuación:
Sí, sí, el número de estrellas iluminadas en la estrella inicial se debe a los datos
C: Ahora podemos hablar sobre estos datos, pero ¿qué son estos datos?
Resulta que el front-end y el back-end acordaron dónde se almacenan los datos (puede darle cualquier nombre TADA o TDAT). El back-end puede asignar valores, y los datos equivalen a tantas estrellas como es. Pero, ¿por qué necesitas estos datos?
Es Jiang Zi: cuando el usuario hace clic en la estrella, se puede ver al usuario B User C User D ..., por lo que el número de estrellas haciendo clic en el usuario debe almacenarse (asignarse) en un determinado lugar (es decir, datos) para que el fondo pueda obtenerlo.
Es decir, el front-end asigna valores, el back-end toma valores y el back-end almacena los datos obtenidos en la base de datos y luego lo reasigna a los datos para mostrar el número de estrellas positivas que el usuario A ha evaluado.
Asignación de front-end ------》 Valor de fondo-》 Datos de almacenamiento de back-end-》 Comentarios de fondo al front-end basado en los datos almacenados-》 El front-end muestra los efectos correspondientes en la página basados en la retroalimentación de los datos de la parte posterior-》》》》》
Ok, si comprende la lógica, puede escribir el programa:
$ ('. div '). Cada (función (i, ele) {// elemento actual, el índice del elemento actual if (i <star) { / *alert (i); * / / *alert (ele); * /$ (ele) .addclass (' light ');}});});El código anterior es relativamente simple. Primero, itera y encuentre el Div a continuación.
Después de encontrarlo, retire todas sus luces (la luz es la clase que ilumina las estrellas en CSS), y luego atraviesa el U-Grada_item. Star ha obtenido el valor de los datos y juzgado en base a i <Star.
Esto muestra la cantidad de brillo de las estrellas, es decir, la primera imagen de arriba es brillante, uno es brillante, uno es brillante, uno es brillante, uno es brillante y uno es brillante, y el otro es brillante, y el otro es brillante, y el otro es brillante, y el otro es brillante, y el otro es brillante, y el número es brillante, y el número es brillante, y el número es brillante.
4.1: En este punto, hemos completado la asignación de back-end y el efecto de rendimiento frontal. Todavía quedan dos piezas en este momento.
Una es la parte donde el usuario hace clic para producir el efecto, y el otro es asignar el valor del usuario hace clic en la estrella actual en los datos (deje que el backend guarde el valor y reasigne el valor y muestrelo)
4.2: Hagamos lo siguiente para mostrar el efecto de los clics del usuario
$ (function () {$. setGrade = function ($ ele, index) {var $ item = $ ele.find (". U-grade_item"); $ item.removeclass ("light"); $ item.slice (0, index+1) .AddClass ("Light"); /*alerta (index 1);* /}; (function (function () {var $ ($ ($ ($ (UITS (U (". .u-grade_item "); $ item.click (function () {var $ this = $ (this);/*Define una variable para ahorrar el objeto $ item actual*/var index = $ this.parent (". U-grade "). Children (". U-Grade_Item "). Index ($ this) ;// La posición de índice del índice de índice (), que es lo que es lo que cree es lo que piensa); */ $ .SetGrade ($ this.parent (), index);R: No hablaré sobre la implementación del código uno por uno. Puedes leer los comentarios. De esta manera, el usuario hace clic para producir el efecto. Solo hay el último a continuación. Asigne el valor de la estrella haciendo clic en el usuario a los datos.
Es fácil dejarlo en claro:
(function () {var $ item = $ (". U-grade .u-grade_item"); $ item.click (function () {var $ this = $ (this); var index = $ this.parent (". u-grade_item"). index ($ this); var star = $ (this) .Parent (". U-crade"). valor de datos $ .setGrade ($ this.parent (), index);De acuerdo, se ha introducido todo el contenido de este artículo. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!