【アウトプット㉒】-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');
   }
});