1. Encontrei a página de avaliação do produto no projeto, que continha a avaliação da estrela do produto. Naquela época, acabei de escrever o efeito (ou seja, o usuário clicou em algumas estrelas para mostrar alguns brilhantes).
Quando eu fiz a página e a entreguei ao meu colega de back -end, ele disse que não fazia sentido fazer isso e ele não conseguiu. Naquela época, minha mente estava um pouco confusa.
Mais tarde, meu colega no back -end disse que faria problemas. Como um jovem ensolarado no século XXI, como ele poderia deixar seus colegas ajudá -lo a concluir suas tarefas?
Através do conselho de meus colegas e da minha própria exploração, finalmente entendi o relacionamento aqui. Agora vou explicar como escrever este programa e quais operações devem ser feitas através de minhas próprias palavras.
A, a imagem está acima:
B: A imagem acima revisou uma das 5 luzes e as outras 4 luzes. O que faz isso assim? Veja a foto abaixo:
Sim, sim, o número de estrelas iluminadas na estrela inicial é por causa dos dados
C: Agora podemos falar sobre esses dados, mas quais são esses dados?
Acontece que o front-end e o back-end concordaram com onde os dados são armazenados (você pode fornecer qualquer nome TADA ou TDAT). O back-end pode atribuir valores a ele, e os dados são iguais a tantas estrelas quanto são. Mas por que você precisa desses dados?
É Jiang Zi: Quando o usuário clica na estrela, ele pode ser visualizado para o usuário B Usuário C Usuário D ..., então o número de estrelas clicadas pelo usuário deve ser armazenado (atribuído) em um determinado local (ou seja, dados) para que o plano de fundo possa obtê -lo.
Ou seja, o front-end atribui valores, o back-end leva os valores e o back-end armazena os dados obtidos no banco de dados e depois os reatura aos dados para exibir o número de estrelas positivas que o usuário A avaliou.
Atribuição de front-end ------》 Valor de back-end-》 Dados de armazenamento de back-end-》 Feedback de back-end ao front-end com base nos dados armazenados-》 O front-end exibe efeitos correspondentes na página com base no feedback dos dados da parte traseira-》
OK, se você entende a lógica, pode escrever o programa:
$ ('. avaliar_mark'). cada (function () {var star = $ (this) .find ('. u-grade'). att ('dados'); // obtendo dados um é 5 e o outro é 4/*alert (star)*/$ (this) .find ('u-grade div'). div '). Cada (função (i, ele) {// elemento atual de ele, o índice do elemento atual if (i <star) { / *alert (i); * / / *alert (ele); * /$ (ele) .addclass (' luz ');}});});O código acima é relativamente simples. Primeiro, itera e encontre a divindra.
Depois de encontrá-lo, remova todas as suas luzes (a luz é a classe que ilumina as estrelas no CSS) e depois atravesse o U-grada_item. Star obteve o valor dos dados e julgado com base em i <star.
Isso mostra o número de brilho das estrelas, ou seja, a primeira imagem acima é brilhante, uma é brilhante, uma é brilhante, uma é brilhante, uma é brilhante e uma é brilhante e a outra é brilhante, e a outra é brilhante, e o outro é brilhante e o outro é brilhante.
4.1: Neste ponto, concluímos a tarefa de back-end e o efeito de desempenho do front-end. Ainda restam duas peças neste momento.
Uma é a parte em que o usuário clica para produzir o efeito e o outro é atribuir o valor do usuário clica na estrela atual nos dados (deixe o back -end salvar o valor e reatribuir o valor e exibi -lo)
4.2: Vamos fazer o seguinte para mostrar o efeito dos cliques do usuário
$ (function () {$. setGrade = function ($ ele, index) {var $ item = $ ele.find (". u-grade_item"); $ item.RemoveClass ("luz"); .u-grade_item "); $ item.Click (function () {var $ this = $ (this); /*Defina uma variável para salvar o objeto $ item $ atual* /var index = $ this.parent (". elemento/ *alerta (índice);R: Não vou falar sobre a implementação do código uma a uma. Você pode ler os comentários. Dessa forma, o usuário clica para produzir o efeito. Existe apenas o último abaixo. Atribua o valor da estrela clicada pelo usuário aos dados.
É fácil deixar claro:
(function () {var $ item = $ (". u-grade .u-grade_item"); $ item.Click (function () {var $ this = $ (this); var index = $ this.parent (". Valor dos dados $ .setGrade ($ this.parent (), índice);Ok, todo o conteúdo deste artigo foi introduzido. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!