Apply css background for each element based on parent data attribute
I am creating a rating bar with an element that has a data rating attribute and these are children with 5 buttons. How can I change the background image of buttons depending on the data evaluation attribute? For example, if data-rating = "3" - select the first 3 buttons and change their background.
This is my code:
var rating = $('#video-list .children .branch-opened .rating');
rating.each(function() {
var value = $(this).data('rating');
var button = $(this).find('button');
});
HTML:
<div class="rating" data-rating="4">
<button value="1"></button>
<button value="2"></button>
<button value="3"></button>
<button value="4"></button>
<button value="5"></button>
</div>
Many thanks!
+3
source to share
4 answers
This simple code will work for you.
Updated code
var rating = $('.rating');
rating.each(function() {
var rValue = $(this).data('rating');
$(this).find('button').slice(0, rValue).addClass('black');
});
.black {
background-color: black;
}
.rating button {
width: 10%;
display: inline-block;
padding: 20px;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-rating="4">
<button value="1"></button>
<button value="2"></button>
<button value="3"></button>
<button value="4"></button>
<button value="5"></button>
</div>
+2
source to share
Use .each
if you are already using jQuery:
var rating = $('.rating').data('rating');
$('.rating .item').slice(0,rating).each(function(index, value) {
$(this).toggleClass('highlighted');
});
.rating {
display: flex;
}
.item {
flex: 1;
padding: 10px;
background-color: #eee;
}
.item.highlighted {
background-color: goldenrod;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-rating="4">
<button class="item" value="1"></button>
<button class="item" value="2"></button>
<button class="item" value="3"></button>
<button class="item" value="4"></button>
<button class="item" value="5"></button>
</div>
+2
source to share
save the rating value and scroll through the buttons and check the condition if the index is less than the rating value, then add a highlight class to the buttons.
var ratingValue = $('.rating').data('rating');
$('.rating .item').each(function (index, value) {
if ( index < ratingValue ) {
$(this).toggleClass('highlighted')
}
});
.rating {
display: flex;
flex-direction: column
}
.item {
flex: 1;
padding: 10px;
background-color: #eee;
}
.item.highlighted {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-rating="3">
<button class="item" value="1"></button>
<button class="item" value="2"></button>
<button class="item" value="3"></button>
<button class="item" value="4"></button>
<button class="item" value="5"></button>
</div>
0
source to share