我正在使用酒吧评级。我需要评级中的颜色变体。浅色到深色的变体。我的代码如下
<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>
老问题，但很有趣。
您没有指定哪个主题（“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;
}
当然，根据您的要求选择不同的颜色。