时间戳

首页 > 解决方案 > 我想在 javascript 中创建响应式星级评分

javascript - 我想在 javascript 中创建响应式星级评分

问题描述

这是我的 HTML

       <div id="starRatings">
         <span class="fa fa-star checked"></span>
         <span class="fa fa-star "></span>
         <span class="fa fa-star "></span>
         <span class="fa fa-star "></span>
         <span class="fa fa-star "></span>

这是我的 Javascript

const starRating = $("#starRatings").children();
    for (let i = 0; i < starRating.length; i++) {
        starRating[i].addEventListener("mouseover", function() {
           
            for (let j = 1; j <= starRating.length; j++) {
                              
                $(starRating[j]).removeClass("checked");
                
            }
            for (let j = 1; j> i; j--) {
               
                $(starRating[j]).addClass("checked");
                console.log(starRating[j])  
            }
        });
        
        starRating[i].addEventListener("mouseleave", function() {
            for (let j = 1; j <= starRating.length; j++) {
                $(starRating[j]).addClass("checked");
                console.log(j)  
            }
            for (let j = 1; j> i; j--) {
                $(starRating[j]).removeClass("checked");
                console.log(j)  
            }

             });

           
            starRating[i].addEventListener("click", function() {    
                for (let j = 1; j <= starRating.length; j++) {
                $(starRating[j]).addClass("checked");
                
            }
            for (let j = 1; j> i; j--)  {
                $(starRating[j]).removeClass("checked");
                
            }

             });       
        }

检查的类只是给星星一个橙色，我希望一个始终是橙色的。我希望其他人在鼠标进入时变成橙色，在鼠标离开时变回灰色，当用户真正想要点击一些星星时，即使在鼠标离开后，它们仍然保持橙色，因为我猜我需要在某处使用 if 语句.

我意识到它应该很简单，而且我有太多的 for 循环，但我失去了理智！任何人都可以帮忙吗？

标签： javascriptfor-loopmouseevent

解决方案

我可以为您提供一个带有 jquery 的示例

https://jsfiddle.net/mp4oze3f/

CSS

 .et-app-sr {
  border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important
}
.et-app-rating-stars {
    height: 4em;
    display: flex
}

.et-app-rating-star {
    background: none;
    border: none;
    box-shadow: none;
    font-size: 3.4em;
    cursor: pointer;
}

.et-app-rating-star .selected {
    display: none;
    color: #edff71
}

.et-app-rating-star.select i, .et-app-rating-star.highlight i {
    display: none
}

.et-app-rating-star.select .selected, .et-app-rating-star.highlight .selected {
    display: block
}

.et-app-rating-star:focus {
    outline: 1px solid #000
}

JS (jQuery)

$('[data-star]').on('click', function(e) {
  e.preventDefault();
  $(this).addClass('select');
  $(this).prevAll('[data-star]').addClass('select');
  $(this).nextAll('[data-star]').removeClass('select');
  $(this).parent().find('input').val($(this).data('star'));
});
$('[data-star]').on('mouseover', function(e) {
  e.preventDefault();
  $(this).addClass('highlight');
  $(this).prevAll('[data-star]').addClass('highlight');
  $(this).nextAll('[data-star]').removeClass('highlight');
});
$('[data-star]').on('mouseout', function(e) {
  e.preventDefault();
  $(this).removeClass('highlight');
  $(this).prevAll('[data-star]').removeClass('highlight');
});

HTML

<div class="et-app-rating-stars">
  <input type="hidden">
  <button class="et-app-rating-star" data-star="1">
    <i class="fa fa-star-o" aria-hidden="true"></i>
    <i class="fa fa-star selected" aria-hidden="true"></i>
    <span class="et-app-sr">Rating: 1 star</span>
  </button>
  <button class="et-app-rating-star" data-star="2">
    <i class="fa fa-star-o" aria-hidden="true"></i>
    <i class="fa fa-star selected" aria-hidden="true"></i>
    <span class="et-app-sr">Rating: 2 star</span>
  </button>
  <button class="et-app-rating-star" data-star="3">
    <i class="fa fa-star-o" aria-hidden="true"></i>
    <i class="fa fa-star selected" aria-hidden="true"></i>
    <span class="et-app-sr">Rating: 3 star</span>
  </button>
  <button class="et-app-rating-star" data-star="4">
    <i class="fa fa-star-o" aria-hidden="true"></i>
    <i class="fa fa-star selected" aria-hidden="true"></i>
    <span class="et-app-sr">Rating: 4 star</span>
  </button>
  <button class="et-app-rating-star" data-star="5">
    <i class="fa fa-star-o" aria-hidden="true"></i>
    <i class="fa fa-star selected" aria-hidden="true"></i>
    <span class="et-app-sr">Rating: 5 star</span>
  </button>
</div>

我用的比你需要的多，我换了图标，你可以看看逻辑，做这样的事情

推荐阅读