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/

jQuery bar-rating插件颜色变体

1 个答案: