I'm struggling with designing a ranking bar that consists of 9 bars. I want the height of the bars to vary, with bar 0 and bar 8 being the longest. However, I am having difficulty manipulating my jQuery selector to change the CSS style of the bars based on the selected option value. Below is my code.
CSS:
.rating-c .br-widget {
height: 60px;
display: inline;
}
.rating-c .br-widget a {
display: inline;
width: 20px;
height: 60px;
float: left;
background-color: #FFFFFF;
margin: 2px;
text-decoration: none;
font-size: 16px;
font-weight: 400;
line-height: 2.2;
text-align: center;
color: #444444;
border: thin solid #b6b6b6;
}
.rating-c .br-widget a.br-active,
.rating-c .br-widget a.br-selected {
background-color: #59a6d6;
color: white;
}
HTML:
<div class="rating-c">
<label class="ratingLabel">
<select id="rating-c" name="rating">
<option value=""></option>
<option value="1">4</option>
<option value="2">3</option>
<option value="3">2</option>
<option value="4">1</option>
<option value="5">0</option>
<option value="6">1</option>
<option value="7">2</option>
<option value="8">3</option>
<option value="9">4</option>
</select>
Price</label>
</div>
JavaScript:
$('.rating-c .br-widget a select[name=rating]').each(function(){
if($(this).attr("value")==="2"){
$(".rating-c").css("height", "55px");
}
if($(this).attr("value")==="3"){
$(".rating-c .br-widget a").css("height", "50px");
}
});
I'm facing issues with getting this code to work properly. Can someone provide assistance? Thank you in advance for your help!