Issue
I have a simple difficulty scale. As I only know some basics of jQuery and JavaScript I don't know what I'm searching for. I want to add the class active to the item based on the data-attribute of the parents element.
Below two examples how it should look like at the end.
<div class='difficulty-wrapper' data-difficulty='1'>
<span class='difficulty-item active'></span>
<span class='difficulty-item'></span>
<span class='difficulty-item'></span>
<span class='difficulty-item'></span>
</div>
<div class='difficulty-wrapper' data-difficulty='4'>
<span class='difficulty-item active'></span>
<span class='difficulty-item active'></span>
<span class='difficulty-item active'></span>
<span class='difficulty-item active'></span>
</div>
Solution
Without Jquery:
document.querySelectorAll('.difficulty-wrapper').forEach(wrapper => {
const difficulty = wrapper.dataset.difficulty || 0;
const items = [...wrapper.querySelectorAll('.difficulty-item')].slice(0, difficulty);
items.forEach(item => item.classList.add('active'));
})
.difficulty-wrapper {
display: flex;
gap: 2px;
}
.difficulty-wrapper:not(:last-child) {
margin-bottom: 2px;
}
.difficulty-item {
width: 48px;
height: 32px;
border-radius: 2px;
background-color: yellow;
border: solid 1px red;
}
.difficulty-item.active {
background-color: blue;
}
<div class="difficulty-wrapper" data-difficulty="1">
<span class="difficulty-item"></span>
<span class="difficulty-item"></span>
<span class="difficulty-item"></span>
<span class="difficulty-item"></span>
</div>
<div class="difficulty-wrapper" data-difficulty="4">
<span class="difficulty-item"></span>
<span class="difficulty-item"></span>
<span class="difficulty-item"></span>
<span class="difficulty-item"></span>
</div>
Answered By - imhvost
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.