0
289
Vistas¿Cómo mostrar estrellas según la calificación del usuario?
Me gustaría mostrar estrellas según la calificación. Solo puedo mostrar un producto con estrellas de calificación y los otros productos no muestran ninguna estrella, solo muestran el número de calificación. podría ayudar a comprobar qué parte necesita cambiar?
<%- include ('_layouts/header'); -%> <h1>......Exciting Books.....</h1> <hr size="100" width="100%" align="center" color="black"> <br> <div class="row products"> <% savedexcit.forEach(function(products){ %> <div class="col-xs-12 col-md-4 p shop-item"> <a class="pa" href="/products/<%= products.category %>/<%= products.slug %>"> <img class="pimage" src="/product_images/<%= products.id %>/<%= products.image %>" alt=""> </a> <h3><%= products.title %></h3> <b>Rating: <span id=stars></span><%= products.rating %>/5</b> <a class="vd" href="/products/<%= products.category %>/<%= products.slug %>">View Details</a> </div> <% }); %> </div> <script> <% savedexcit.forEach(function(products){ %> document.getElementById("stars").innerHTML = getStars(<%= products.rating %>); function getStars(rating) { // Round to nearest half rating = Math.round(rating * 2) / 2; let output = []; // Append all the filled whole stars for (var i = rating; i >= 1; i--) output.push('<i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> '); // If there is a half a star, append it if (i == .5) output.push('<i class="fa fa-star-half-o" aria-hidden="true" style="color: gold;"></i> '); // Fill the empty stars for (let i = (5 - rating); i >= 1; i--) output.push('<i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> '); return output.join(''); } <% }); %> </script> <%- include ('_layouts/footer'); -%> resultado de salida: 
2 Respuestas
Responde la pregunta0
puedes usar la biblioteca jquery:
https://www.jqueryscript.net/other/rating-star-icons.html
<div id="dataReadonlyReview" data-rating-stars="5" data-rating-readonly="true" data-rating-value="3" data-rating-input="#dataReadonlyInput">y puede ver: Convierta un número en una visualización de calificación de estrellas usando jQuery y CSS
0
Editar: he editado la respuesta para ser más específica. Además, creo que esta es la plantilla ejs solo para ser más claro.
La identificación en html se usa para identificar elementos individuales y al verificar su código, hay dos lugares donde la identificación se declara incorrectamente, es decir, la está declarando varias veces.
En la sección Creación de la fila
<h3><%= products.title %></h3> <b>Rating: <span id=stars></span><%= products.rating %>/5</b>En la etiqueta del script donde está accediendo a la identificación
<% savedexcit.forEach(function(products){ %> document.getElementById("stars").innerHTML = getStars(<%= products.rating %>);
Para resolver este problema, debe agregar diferentes ID, lo que puede hacer simplemente agregando un contador o necesita agregar una clase en la estrella y usarla para acceder a los elementos o simplemente acceder usando la clase. Puede intentar hacer los siguientes cambios y esto debería resolver el problema con suerte
Acceda al índice incluyendo una variable (índice) en la función de devolución de llamada.
<% savedexcit.forEach(function(products, index){ %> <div class="col-xs-12 col-md-4 p shop-item"> <a class="pa" href="/products/<%= products.category %>/<%= products.slug %>"> <img class="pimage" src="/product_images/<%= products.id %>/<%= products.image %>" alt=""> </a> <h3><%= products.title %></h3> <b>Rating: <span id="stars<%= index %>">></span><%= products.rating %>/5</b>Luego haga el mismo cambio dentro de la etiqueta del script como se muestra a continuación
<% savedexcit.forEach(function(products,index){ %> document.getElementById("stars<%= index %>").innerHTML = getStars(<%= products.rating %>);
Esto debería cambiar el destino de la identificación del elemento específico.