jQuery酒吧評級插件顏色變種

Question

我正在使用酒吧評級。我需要評分中的顏色變體。 淺至深顏色變體。 我的代碼如下

<script src='jquery.barrating.min.js'></script> 

<div class="rating-a"> 
<select id="example"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
</select> 

<script> 
$(function() { 
    $('#example').barrating(); 
}); 
</script> 

Answer 1

老問題，但很有趣。

您還沒有指定哪個主題（「rating-a」看起來不是標準主題），所以我已經使用.br-theme-bars-1to10，因爲它非常符合要求，但任何主題都應該沒問題。

本質上說，巴評級與價值data-rating-value各條，如創建錨：

<a href="#" data-rating-value="4" data-rating-text="4"></a> 

因此，我們可以利用這個基礎上添加屬性附加CSS規則，使用[attr=vaue] CSS選擇器，如：

.br-theme-bars-1to10 .br-widget a.br-active[data-rating-value="1"], 
.br-theme-bars-1to10 .br-widget a.br-selected[data-rating-value="1"] { 
    background-color: #f6ede0; 
} 
.br-theme-bars-1to10 .br-widget a.br-active[data-rating-value="2"], 
.br-theme-bars-1to10 .br-widget a.br-selected[data-rating-value="2"] { 
    background-color: #f8e4c5; 
} 
.br-theme-bars-1to10 .br-widget a.br-active[data-rating-value="3"], 
.br-theme-bars-1to10 .br-widget a.br-selected[data-rating-value="3"] { 
    background-color: #f2cd95; 
} 
.br-theme-bars-1to10 .br-widget a.br-active[data-rating-value="4"], 
.br-theme-bars-1to10 .br-widget a.br-selected[data-rating-value="4"] { 
    background-color: #f3ba62; 
} 
.br-theme-bars-1to10 .br-widget a.br-active[data-rating-value="5"], 
.br-theme-bars-1to10 .br-widget a.br-selected[data-rating-value="5"] { 
    background-color: #f3980e; 
} 

當然，根據您的要求選擇不同的顏色。

工作小提琴：https://jsfiddle.net/mm65ody4/