Wie kann man Sterne bewerten?

Question

Ich habe this star rating snippet mit gutem Erfolg in meinem Chrome-Erweiterung Popup HTML umgesetzt:

Hier ist meine Implementierung:

.rating { 
 
    float: left; 
 
    unicode-bidi: bidi-override; 
 
    direction: rtl; 
 
    font-size: 28px; 
 
    margin-top: -11px; 
 
    color: #e8d04c; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
} 
 
.rating > span { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 0.7em; 
 
    cursor: pointer; 
 
} 
 
.rating > span:hover:before, 
 
.rating > span:hover ~ span:before { 
 
    content: "\2605"; 
 
    position: absolute; 
 
}

<div id="divRating" class="rating"> 
 
    <span id="spanRatingExcellent" title="Excellent">☆</span> 
 
    <span id="spanRatingGood" title="Good">☆</span> 
 
    <span id="spanRatingFair" title="Fair">☆</span> 
 
    <span id="spanRatingPoor" title="Poor">☆</span> 
 
    <span id="spanRatingAwful" title="Awful">☆</span> 
 
</div>

Es funktioniert mit Ausnahme fein, dass dieser Ansatz ein nicht liefern Möglichkeit, dass der ausgewählte Stern "klebt". Zum Beispiel, wenn der Benutzer auf 4 Sterne klickt, wenn der Mauszeiger geht, möchte ich, dass die Sterne 1-4 hervorgehoben bleiben. Stattdessen leuchten alle Sterne beim Mouseout aus. Aber wenn dann die Maus wieder benutzt und ein Stern geklickt wird, brauche ich korrektes (originelles) Verhalten. Und wiederum, wenn ein Stern angeklickt wird, sollten die ausgewählten Sterne beim Verlassen der Maus hervorgehoben bleiben und alle nicht ausgewählten Sterne (rechts) bleiben unmarkiert.

Eine reine CSS-Lösung wäre cool, aber ich bin glücklich, jQuery oder Javascript zu verwenden, um dies zu erreichen.

Vielen Dank im Voraus.

Answer 1

Hier ist eine Implementierung unter Verwendung von reinem JavaScript, zusammen mit Ihrer HTML und CSS.

document.getElementById('divRating').addEventListener('click', function(event) { 
 
    if (event.target.tagName.toLowerCase() != 'span') return; 
 
    
 
    if (event.target.classList.contains('rated')) { 
 
    event.target.classList.remove('rated'); 
 
    } else { 
 
    Array.prototype.forEach.call(document.getElementsByClassName('rated'), function(el) { 
 
     el.classList.remove('rated'); 
 
    }); 
 
    event.target.classList.add('rated'); 
 
    } 
 
});

.rating { 
 
    float: left; 
 
    unicode-bidi: bidi-override; 
 
    direction: rtl; 
 
    font-size: 28px; 
 
    margin-top: -11px; 
 
    color: #e8d04c; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
} 
 
.rating > span { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 0.7em; 
 
    cursor: pointer; 
 
} 
 
.rating > span:hover:before, 
 
.rating > span:hover ~ span:before, 
 
.rating > span.rated:before, 
 
.rating > span.rated ~ span:before { 
 
    content: "\2605"; 
 
    position: absolute; 
 
}

<div id="divRating" class="rating"> 
 
    <span id="spanRatingExcellent" title="Excellent">☆</span> 
 
    <span id="spanRatingGood" title="Good">☆</span> 
 
    <span id="spanRatingFair" title="Fair">☆</span> 
 
    <span id="spanRatingPoor" title="Poor">☆</span> 
 
    <span id="spanRatingAwful" title="Awful">☆</span> 
 
</div>

Answer 2

Verwendung Rate Yo jQuery Sterne-Plugin mit Daten

$(function() { 
 
    $(".rateyo").rateYo().on("rateyo.change", function (e, data) { 
 
    var rating = data.rating; 
 
    $(this).parent().find('.result').text('rating :'+ rating); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/> 
 
<div> 
 
    <div class="rateyo" data-rateyo-rating="2.5" data-rateyo-num-stars="5"></div> 
 
    <span class='result'>0</span> 
 
</div>

Answer 3

Attribut Wenn Sie eine reine CSS-Version möchten, dann bietet Lea Verou dass, und aus der verbunden ist Artikel oben unter dem Abschnitt Actual Usage.

Es funktioniert mit Radiobuttons, um den Wert der Sterne ausgewählt haben.

See the JS fiddle here und die explainer here.

Hier ist ihr Code herausgezogen (nicht Kredit für diese Lösung nehmen, nur auf sie zeigen).

<fieldset class="rating"> 
    <legend>Please rate:</legend> 
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label> 
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label> 
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label> 
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label> 
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label> 
</fieldset> 

CSS:

.rating { 
    float:left; 
} 

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
    follow these rules. Every browser that supports :checked also supports :not(), so 
    it doesn’t make the test unnecessarily selective */ 
.rating:not(:checked) > input { 
    position:absolute; 
    top:-9999px; 
    clip:rect(0,0,0,0); 
} 

.rating:not(:checked) > label { 
    float:right; 
    width:1em; 
    padding:0 .1em; 
    overflow:hidden; 
    white-space:nowrap; 
    cursor:pointer; 
    font-size:200%; 
    line-height:1.2; 
    color:#ddd; 
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5); 
} 

.rating:not(:checked) > label:before { 
    content: '★ '; 
} 

.rating > input:checked ~ label { 
    color: #f70; 
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5); 
} 

.rating:not(:checked) > label:hover, 
.rating:not(:checked) > label:hover ~ label { 
    color: gold; 
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); 
} 

.rating > input:checked + label:hover, 
.rating > input:checked + label:hover ~ label, 
.rating > input:checked ~ label:hover, 
.rating > input:checked ~ label:hover ~ label, 
.rating > label:hover ~ input:checked ~ label { 
    color: #ea0; 
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); 
} 

.rating > label:active { 
    position:relative; 
    top:2px; 
    left:2px; 
}