如何制作星级评级？

Question

我在Chrome扩展弹出HTML实现this star rating snippet具有良好的成功：

这是我实现：

.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>

它工作正常，只是这种方法不提供让选定的星星“坚持”。例如，如果用户单击4颗星，则当鼠标指针离开时，我希望星号1-4保持高亮显示。相反，所有的星星都不会高兴。但是，如果再次使用鼠标悬停并点击星星，我需要正确的（原始）行为。再次，如果点击了一颗星星，所选星星在鼠标移出时应该保持高亮状态，并且任何未选中的星星（右侧）都不会突出显示。

纯粹的CSS解决方案会很酷，但我非常乐意使用jQuery或JavaScript来实现这一点。

在此先感谢。

Answer 1

下面是使用纯JavaScript，请使用您的HTML和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

使用Rate Yo jQuery的星级插件与数据属性

$(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

如果你想要一个纯CSS版本，则利·贝罗规定，并从挂上面的文章在Actual Usage部分。

它通过使用单选按钮来保存选定星星的值。

See the JS fiddle here和explainer here.

这里是她的代码拉出（不采取信用为这个解决方案，只是指出它）。

<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; 
}