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

Select不同的颜色当然要看你的要求了。

工作fiddle：https://jsfiddle.net/mm65ody4/

jQuery 条形评级插件颜色变体

jQuery bar-rating plugin color variants

html

jquery

jquery-bar-rating