星级评定如何启用如果单击了星级，也单击了前一个星级

Question

 $('.ratings_stars').click(function() { $('.ratings_stars').removeClass('selected'); // Removes the selected class from all of them $(this).addClass('selected'); var rating = $(this).data('rating'); // Get the rating from the selected star $('#rating').val(rating); // Set the value of the hidden rating form element }); 

 fa-star { color: rgba(112, 111, 111, 0.856); } .fa-star:hover { color: #e2334c; } .fa-star.selected { color: #001628; } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="hidden" id="rating" name="rating" value="-1"> <div class="rating"> <i class="ratings_stars fa fa-star" data-rating="1"></i> <i class="ratings_stars fa fa-star" data-rating="2"></i> <i class="ratings_stars fa fa-star" data-rating="3"></i> <i class="ratings_stars fa fa-star" data-rating="4"></i> <i class="ratings_stars fa fa-star" data-rating="5"></i> </div> 

单击一颗星之前，另一颗之前没有被单击，但已正确保存到数据库中。

Answer 1

使用prevAll()和nextAll()

 $('.rating').on('click', '.ratings_stars', function () { var star = $(this) star.addClass('selected') star.prevAll().addClass('selected') star.nextAll().removeClass('selected') $('#rating').val(star.data('rating')) }); 

 .fa-star { color: rgba(112, 111, 111, 0.856); } .fa-star:hover { color: #e2334c; } .fa-star.selected { color: #001628; } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="hidden" id="rating" name="rating" value="-1"> <div class="rating"> <i class="ratings_stars fa fa-star" data-rating="1"></i> <i class="ratings_stars fa fa-star" data-rating="2"></i> <i class="ratings_stars fa fa-star" data-rating="3"></i> <i class="ratings_stars fa fa-star" data-rating="4"></i> <i class="ratings_stars fa fa-star" data-rating="5"></i> </div> 

Answer 2

没有任何jQuery的简单解决方案：

 const stars = document.querySelectorAll('.ratings_stars'); document.addEventListener('click', (evt) => { if (evt.target.classList.contains('ratings_stars')) { let clicktargetReached = false; for (const star of stars) { star.classList[clicktargetReached ? 'remove' : 'add']('selected'); if (star === evt.target) { clicktargetReached = true; } } result.textContent = evt.target.dataset.rating; } }); 

 fa-star { color: rgba(112, 111, 111, 0.856); } .fa-star:hover { color: #e2334c; } .fa-star.selected { color: #a00; } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="rating"> <i class="ratings_stars fa fa-star" data-rating="1"></i> <i class="ratings_stars fa fa-star" data-rating="2"></i> <i class="ratings_stars fa fa-star" data-rating="3"></i> <i class="ratings_stars fa fa-star" data-rating="4"></i> <i class="ratings_stars fa fa-star" data-rating="5"></i> </div> <div id="result"></div> 

Answer 3

该演示利用了每个星星的索引位置。 悬停效果是纯CSS：

• 分配display: flex到星星的父标签
• 颠倒星星的顺序，并以相反的顺序分配order属性。
• 记住三元条件也要反转（A行）

• 将此CSS规则集添加到原始的:hover规则集

   .star:hover~.star 

 $('.rating').on('click', '.star', function() { let point = $(this).index(); $('.star').each(function(index) { return index >= point ? $(this).addClass('selected') : $(this).removeClass('selected'); //A }); $('#rating').val($(this).data('rating')); console.log($('#rating').val()); }); 

 .rating { display: flex; justify-content: space-evenly; width: 25%; } .star { display: inline-block; color: rgba(112, 111, 111, 0.856); cursor: pointer; } .star.selected { color: #001628; } .star:hover, .star:hover~.star { color: #e2334c; } .as-console-wrapper { max-height: 25px !important } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous"> <input id="rating" name="rating" type="hidden" value=""> <div class="rating"> <i class="star fa fa-star" data-rating="5" style='order:5'></i> <i class="star fa fa-star" data-rating="4" style='order:4'></i> <i class="star fa fa-star" data-rating="3" style='order:3'></i> <i class="star fa fa-star" data-rating="2" style='order:2'></i> <i class="star fa fa-star" data-rating="1" style='order:1'></i> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>