Zamień liczbę na wyświetlanie gwiazdek za pomocą jQuery i CSS

Jeśli musisz tylko obsługiwać nowoczesne przeglądarki, możesz uciec od:

• No images;
• głównie statyczny css;
• prawie brak jQuery lub Javascript;

Wystarczy zamienić liczbę na class, np. class='stars-score-50'.

Pierwsze demo "renderowanych" znaczników:

body { font-size: 18px; }

.stars-container {
  position: relative;
  display: inline-block;
  color: transparent;
}

.stars-container:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  color: lightgray;
}

.stars-container:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  color: gold;
  overflow: hidden;
}

.stars-0:after { width: 0%; }
.stars-10:after { width: 10%; }
.stars-20:after { width: 20%; }
.stars-30:after { width: 30%; }
.stars-40:after { width: 40%; }
.stars-50:after { width: 50%; }
.stars-60:after { width: 60%; }
.stars-70:after { width: 70%; }
.stars-80:after { width: 80%; }
.stars-90:after { width: 90%; }
.stars-100:after { width: 100; }

Within block level elements:

<div><span class="stars-container stars-0">★★★★★</span></div>
<div><span class="stars-container stars-10">★★★★★</span></div>
<div><span class="stars-container stars-20">★★★★★</span></div>
<div><span class="stars-container stars-30">★★★★★</span></div>
<div><span class="stars-container stars-40">★★★★★</span></div>
<div><span class="stars-container stars-50">★★★★★</span></div>
<div><span class="stars-container stars-60">★★★★★</span></div>
<div><span class="stars-container stars-70">★★★★★</span></div>
<div><span class="stars-container stars-80">★★★★★</span></div>
<div><span class="stars-container stars-90">★★★★★</span></div>
<div><span class="stars-container stars-100">★★★★★</span></div>

<p>Or use it in a sentence: <span class="stars-container stars-70">★★★★★</span> (cool, huh?).</p>

Potem demo, które wykorzystuje trochę kod:

$(function() {
  function addScore(score, $domElement) {
    $("<span class='stars-container'>")
      .addClass("stars-" + score.toString())
      .text("★★★★★")
      .appendTo($domElement);
  }

  addScore(70, $("#fixture"));
});

body { font-size: 18px; }

.stars-container {
  position: relative;
  display: inline-block;
  color: transparent;
}

.stars-container:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  color: lightgray;
}

.stars-container:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  color: gold;
  overflow: hidden;
}

.stars-0:after { width: 0%; }
.stars-10:after { width: 10%; }
.stars-20:after { width: 20%; }
.stars-30:after { width: 30%; }
.stars-40:after { width: 40%; }
.stars-50:after { width: 50%; }
.stars-60:after { width: 60%; }
.stars-70:after { width: 70%; }
.stars-80:after { width: 80%; }
.stars-90:after { width: 90%; }
.stars-100:after { width: 100; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Generated: <div id="fixture"></div>

Największymi wadami tego rozwiązania są:

1. do wygenerowania prawidłowej szerokości potrzebne są gwiazdki wewnątrz elementu;
2. nie ma znaczników semantycznych, np. wolisz wynik jako tekst wewnątrz elementu;
3. pozwala tylko na tyle punktów, ile będziesz miał klas (ponieważ nie możemy użyć Javascript, aby ustawić dokładny width na pseudo-elemencie).

Aby to naprawić powyższe rozwiązanie można łatwo dostosować. Bity :before i :after muszą stać się rzeczywistymi elementami w DOM (więc potrzebujemy do tego trochę JS).

Spróbuj użyć funkcji / pliku jQuery helper

Jquery.Ocena.js

//ES5
$.fn.stars = function() {
    return $(this).each(function() {
        var rating = $(this).data("rating");
        var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fas fa-star"></i>');
        var halfStar = ((rating%1) !== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join('<i class="far fa-star"></i>');
        $(this).html(fullStar + halfStar + noStar);
    });
}

//ES6
$.fn.stars = function() {
    return $(this).each(function() {
        const rating = $(this).data("rating");
        const numStars = $(this).data("numStars");
        const fullStar = '<i class="fas fa-star"></i>'.repeat(Math.floor(rating));
        const halfStar = (rating%1!== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars-rating));
        $(this).html(`${fullStar}${halfStar}${noStar}`);
    });
}

Indeks.html

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Star Rating</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="js/jquery.Rating.js"></script>
        <script>
            $(function(){
                $('.stars').stars();
            });
        </script>
    </head>
    <body>

        <span class="stars" data-rating="3.5" data-num-stars="5" ></span>

    </body>
    </html>

Dlaczego po prostu nie mieć pięciu oddzielnych obrazów Gwiazdy (pustych, pełnych, pół pełnych, trzech pełnych i pełnych), a następnie po prostu wstrzyknąć obrazy do domu w zależności od obciętej lub roudowanej wartości oceny pomnożonej przez 4 (Aby uzyskać całą cyfrę dla kwartałów)?

Na przykład, 4.8618164 pomnożone przez 4 i zaokrąglone wynosi 19, co oznaczałoby cztery i trzy czwarte gwiazd.

Alternatywnie (jeśli jesteś leniwy jak ja), wystarczy wybrać jedno zdjęcie z 21 (0 gwiazdek do 5 gwiazdek w krokach co jedną czwartą) i wybrać pojedynczy obraz na podstawie wyżej wymienionej wartości. Następnie jest to tylko jedno obliczenie, a następnie zmiana obrazu w DOM (zamiast próbować zmienić pięć różnych obrazów).

Skończyłem całkowicie wolny od JS, aby uniknąć opóźnienia renderowania po stronie klienta. Aby to osiągnąć, generuję HTML w ten sposób:

<span class="stars" title="{value as decimal}">
    <span style="width={value/5*100}%;"/>
</span>

Aby pomóc w dostępności, dodaję nawet raw rating value w atrybucie title.

Używając jquery bez prototype, zaktualizuj kod js do

$( ".stars" ).each(function() { 
    // Get the value
    var val = $(this).data("rating");
    // Make sure that the value is in 0 - 5 range, multiply to get width
    var size = Math.max(0, (Math.min(5, val))) * 16;
    // Create stars holder
    var $span = $('<span />').width(size);
    // Replace the numerical value with stars
    $(this).html($span);
});

Dodałem również atrybut data o nazwie Data-rating w span.

<span class="stars" data-rating="4" ></span>

DEMO

Możesz to zrobić tylko z 2 obrazami. 1 puste Gwiazdy, 1 wypełnione Gwiazdy.

Nakładka wypełniona obrazem na górze drugiego. i przekonwertuj liczbę ocen na procent i użyj jej jako szerokości obrazu wypełniacza.

.containerdiv {
  border: 0;
  float: left;
  position: relative;
  width: 300px;
} 
.cornerimage {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
 } 
 img{
   max-width: 300px;
 }

Oto moje podejście do JSX i font awesome, ograniczone tylko .5 trafność:

       <span>
          {Array(Math.floor(rating)).fill(<i className="fa fa-star"></i>)}
          {(rating) - Math.floor(rating)==0 ? ('') : (<i className="fa fa-star-half"></i>)}
       </span>

Pierwszy rząd jest dla całej gwiazdy, a drugi rząd jest dla półgwiazdki (jeśli istnieje)