1. J'ai rencontré la page d'évaluation du produit dans le projet, qui contenait l'évaluation des étoiles du produit. À ce moment-là, je viens d'écrire l'effet (c'est-à-dire que l'utilisateur a cliqué sur quelques étoiles pour en montrer quelques brillants).
Quand j'ai fait la page et l'ai remise à mon collègue backend, il a dit que c'était sans signification pour moi de le faire et qu'il ne pouvait pas le faire. À cette époque, mon esprit était un peu confus.
Plus tard, mon collègue du backend a dit qu'il causerait des problèmes. En tant que jeune homme ensoleillé au 21e siècle, comment pourrait-il laisser ses collègues l'aider à accomplir ses tâches?
Grâce aux conseils de mes collègues et à ma propre exploration, j'ai finalement compris la relation ici. Maintenant, je vais expliquer comment rédiger ce programme et quelles opérations doivent être effectuées par mes propres mots.
A, l'image est au-dessus:
B: L'image ci-dessus a examiné l'une des 5 lumières et les 4 autres lumières. Qu'est-ce qui le fait comme ça? Voir l'image ci-dessous:
Oui, oui, le nombre d'étoiles éclairées dans l'étoile de départ est due aux données
C: Nous pouvons maintenant parler de ces données, mais quelles sont ces données?
Il s'avère que le front-end et le back-end ont convenu où les données sont stockées (vous pouvez lui donner n'importe quel nom tada ou tdat). Le back-end peut lui attribuer des valeurs, et les données sont égales à autant d'étoiles qu'elles l'est. Mais pourquoi avez-vous besoin de ces données?
C'est Jiang Zi: Lorsque l'utilisateur a clique sur l'étoile, il peut être consulté à l'utilisateur B User C User d ..., de sorte que le nombre d'étoiles cliqué sur l'utilisateur doit être stocké (attribué) à un certain endroit (c'est-à-dire les données) afin que l'arrière-plan puisse l'obtenir.
Autrement dit, le frontal attribue des valeurs, le back-end prend des valeurs et le back-end stocke les données obtenues dans la base de données, puis la réaffecte aux données pour afficher le nombre d'étoiles positives que l'utilisateur a évalué.
Affectation frontale ------》 Valeur arrière -》 Données de stockage arrière -》 Rétroaction arrière à la fin frontale en fonction des données stockées -》 L'intein frontal affiche les effets correspondants sur la page en fonction des commentaires des données de l'arrière -》》》》》》》》
OK, si vous comprenez la logique, vous pouvez écrire le programme:
$ ('. evaluate_mark'). Chaque (fonction () {var star = $ (this) .find ('. U-grade'). att ('data'); // obtenir les données de l'une et l'autre est 4 / * alert (star) * / $ (this) .find ('. U-grade div'). repos. div '). Chaque (fonction (i, ele) {// élément actuel de Ele, l'index de l'élément actuel i if (i <star) {/ * alert (i); * / * alert (ele); * / $ (ele) .addclass (' light ');}});});Le code ci-dessus est relativement simple. Tout d'abord, itérez et trouvez le div ci-dessous.u-grade, c'est-à-dire u-grada_item,
Après l'avoir trouvé, retirez toutes ses lumières (la lumière est la classe qui illumine les étoiles en CSS), puis traversez le U-Grada_item. Star a obtenu la valeur des données et jugé en fonction de i <star.
Cela montre le nombre de luminosité des étoiles, c'est-à-dire que la première image ci-dessus est brillante, l'une est brillante, l'une est brillante, l'une est brillante, l'une est brillante, et l'une est brillante, et l'autre est brillante, et l'autre est brillante, et l'autre est brillant, et l'autre est brillant, et l'autre est brillant, et le nombre est brillant, et le nombre est brillant, et l'autre est brillant.
4.1: À ce stade, nous avons terminé l'affectation back-end et l'effet de performance frontal. Il reste encore deux pièces à ce moment.
L'une est la partie où l'utilisateur clique pour produire l'effet, et l'autre est d'attribuer la valeur de l'utilisateur clique sur l'étoile actuelle sur les données (laissez le backend enregistrer la valeur et réaffectation la valeur et affichez)
4.2: Faisons ce qui suit pour afficher l'effet des clics utilisateur
$ (function () {$. setgrate = function ($ ele, index) {var $ item = $ ele.find (". u-grade_item"); $ item.removeclass ("" Light "); / * alert (index + 1); * /}; (fonction (fonction () {var $ .u-grade_item "); $ item.click (function () {var $ this = $ (this); / * définir une variable pour enregistrer l'objet de l'élément $ actuel * / var index = $ this.parent (". élément / * alert (index); * / $ .setgrate ($ this.parent (), index);R: Je ne parlerai pas de l'implémentation du code un par un. Vous pouvez lire les commentaires. De cette façon, l'utilisateur clique pour produire l'effet. Il n'y a que le dernier ci-dessous. Attribuez la valeur de l'étoile cliquée par l'utilisateur aux données.
Il est facile de le préciser:
(fonction () {var $ item = $ (". U-Grade .u-grade_Item"); $ item.click (function () {var $ this = $ (this); var index = $ this.parent (". U-ggle_item"). Valeur de données $ .set ($ this.parent (), index); // méthode statique sous jQuery})}) ();D'accord, l'ensemble du contenu de cet article a été introduit. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!