我想在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语句

我意识到这应该很简单，循环的次数太多了，但是我失去了理智！ 有人可以帮忙吗？

解决方法

我可以用jquery给你一个例子

https://jsfiddle.net/mp4oze3f/

CSS

 .et-app-sr {
  border: 0;
    clip: rect(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>

我用了比您需要的更多的东西，我更改了图标，您可以查看逻辑并做类似的事情