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/