jQuery bar-rating plugin варианты цвета

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

Старый вопрос, но интересно.

Вы не указали, какая тема («рейтинг-а» не является стандартной темой), поэтому я пошел с .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/