comment afficher les étoiles en fonction de l'évaluation de l'utilisateur ?

Question

Je voudrais afficher des étoiles en fonction de l'évaluation. Je ne peux afficher qu'un seul produit avec des étoiles d'évaluation et les autres produits n'affichent pas d'étoile, mais seulement le numéro d'évaluation.

<%- 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="http://stackoverflow.com/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="http://stackoverflow.com/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>&nbsp;');

  // 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>&nbsp;');

  // 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>&nbsp;');

  return output.join('');

}
<% }); %>  
</script>
    <%- include ('_layouts/footer'); -%>

résultat de la sortie :

Answer 1

Vous pouvez utiliser la bibliothèque 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">

et vous pouvez voir : Transformez un chiffre en affichage d'étoiles en utilisant jQuery et CSS

Answer 2

Edit : J'ai modifié la réponse pour être plus précis. De plus, je crois que c'est un modèle ejs, juste pour être plus clair.

L'ID en html est utilisé pour identifier un élément individuel. En vérifiant votre code, il y a deux endroits où l'ID est mal déclaré, c'est-à-dire que vous le déclarez plusieurs fois.

1. Dans la section Création de la ligne

   <h3><%= products.title %></h3>
                   <b>Rating: <span id=stars></span><%= products.rating %>/5</b>

2. Dans la balise script où vous accédez à l'id

    <% savedexcit.forEach(function(products){ %>
   document.getElementById("stars").innerHTML = getStars(<%= products.rating %>);

Pour résoudre ce problème, vous devez soit ajouter des identifiants différents, ce que vous pouvez faire simplement en ajoutant un compteur, soit ajouter une classe sur l'étoile et l'utiliser pour accéder aux éléments, soit simplement y accéder en utilisant la classe. Vous pouvez essayer d'effectuer les changements suivants et cela devrait résoudre le problème.

1. Accédez à son index en incluant une variable (index) dans la fonction de rappel.

   <% savedexcit.forEach(function(products, index){ %>
              <div class="col-xs-12 col-md-4 p shop-item">
                   <a class="pa" href="http://stackoverflow.com/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>

2. Ensuite, faites le même changement à l'intérieur de la balise script comme ci-dessous

    <% savedexcit.forEach(function(products,index){ %>
   document.getElementById("stars<%= index %>").innerHTML = getStars(<%= products.rating %>);

Cela devrait changer la cible de l'id de l'élément spécifique.