【アウトプット㉒】-jQuery- ECサイトなどでよく見る「★★★☆☆」のレビュー機能の実装方法
ECサイトなどでよく見かけるレビュー機能の実装の仕方
<!--html-->
<section class="c-section">
<div class="c-section-head">
<h2 class="c-section-title">レビューをする</h2>
</div>
<ul class="review">
<li class="is-active">★</li>
<li class="is-active">★</li>
<li class="is-active">★</li>
<li>★</li>
<li>★</li>
</ul>
</section>
//css
/*レビューをする*/
.review{
display: flex;
font-size: 30px;
}
.review li{
margin-right: 20px;
color: #ccc;
cursor: pointer;
}
//liに.is-activeがついたときに黄色に変える
.review li.is-active{
color: #FFC107;
}
//js
// レビュー
let review_num = 0;
$('.review li').on('click', function() {
if( review_num == $('.review li').index(this) + 1 ){
$('.review li').removeClass('is-active');
review_num = 0;
}else{
review_num = $('.review li').index(this) + 1;
$('.review li').removeClass('is-active');
$(`.review li:lt('${review_num}')`).addClass('is-active');
}
});