Question

实际上，我正在尝试进行星级评定，但我不知道如何正确进行评定。最好的制作方法是什么？

我尝试了什么：-

$(document).ready(function(){
        $('.ratingUl li').mouseover(function(){
          $(this).find('i').addClass('bg-yellow');
        });

        $('.ratingUl li').mouseout(function(){
//          $(this).find('i').removeClass('bg-yellow');
        });

        $('.ratingUl li').click(function(){
            $(this).find('i').addClass('bg-yellow');
          var ratedValue =  $(this).find('i').attr('value');
        });
    });

  .position-relative{ position: relative;}
  .ratingUl{ margin: 0px; padding: 0px;}
  .ratingUl li{ list-style: none; display: inline;}
  .bg-yellow{ color:orange;}
  .hide{ display: none;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
  
<div class="container p-5">
<ul class="ratingUl">
<li> <i class="fas fa-star" value="1"></i>  </li>
<li> <i class="fas fa-star" value="2"></i>  </li>
<li> <i class="fas fa-star" value="3"></i>  </li>
<li> <i class="fas fa-star" value="4"></i>  </li>
<li> <i class="fas fa-star" value="5"></i>  </li>
</ul>
</div>

Answer 1

标准行为是，当用户在开始时触发mouseover事件时，要标记该事件和所有先前的事件，而不标记其余事件。

使用.prevAll()选择当前开始之前的兄弟姐妹。
使用.addBack()将当前的内容包括在选择中。
使用.nextAll()查找其余的内容。

$(document).ready(function(){
        $('.ratingUl li').mouseover(function(){
          $(this).prevAll().addBack().find('i').addClass('bg-yellow');
          $(this).nextAll().find('i').removeClass('bg-yellow');
          console.log( $('.ratingUl li i.bg-yellow').length );
        });
    });

.position-relative{ position: relative;}
  .ratingUl{ margin: 0px; padding: 0px;}
  .ratingUl li{ list-style: none; display: inline;}
  .bg-yellow{ color:orange;}
  .hide{ display: none;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
  
<div class="container p-5">
<ul class="ratingUl">
<li> <i class="fas fa-star" value="1"></i>  </li>
<li> <i class="fas fa-star" value="2"></i>  </li>
<li> <i class="fas fa-star" value="3"></i>  </li>
<li> <i class="fas fa-star" value="4"></i>  </li>
<li> <i class="fas fa-star" value="5"></i>  </li>
</ul>
</div>

如何获取上次选择的起始值？

我将以另一种方式进行操作：只计算应用了.bg-yellow类的启动次数。

console.log( $('.ratingUl li i.bg-yellow').length );

Answer 2

您可以这样做。我为此创建了一个小插件。你可以在这里找到它。

演示：https://malithmcr.github.io/Better-Rating/

下载：https://github.com/malithmcr/Better-Rating

;(function($){
$.fn.extend({
    betterRating: function( options ) {
        /**
         * @option : wrapper - rating list wrapper div
         * @option : icon - fontAwesome icon name
         */
        this.defaultOptions = {
            wrapper: '#list',
            icon: 'fa fa-star',
        };
        var settings = $.extend({}, this.defaultOptions, options);
        this.getRating(settings);
        return this.each(function() {
            var $this = $(this);
        });
    },
    getRating: function(settings) {
            var self = this;

            $('.rating i').on('click', function(){
                $('#rating-count').val($(this).data('rate'));
                $(this).parent().find('i:lt(' + ($(this).index() + 1) + ')').addClass('selected');
            });

            $('.rating i').on('mouseover', function(){
                $(this).parent().children('.rating i').each(function(e){
                    $(this).removeClass('selected');
                  });
                $(this).parent().find('i:lt(' + ($(this).index() + 1) + ')').addClass('hover');
              }).on('mouseout', function(){
                $(this).parent().children('.rating i').each(function(e){
                  $(this).removeClass('hover');
                });
              });

            $(this).submit(function( event ) {
                event.preventDefault();
                var formData = $(this).serializeArray();
                console.log(formData);

                $('#better-rating-list').append(self.template(formData));
            });

    },

    /** creation of the list template*/
    template: function(data) {
            var rating = '<i class="fa fa-star selected" data-rate="1"></i>';
            for(var i =1; i < data[1].value; i++) {
                rating += '<i class="fa fa-star selected" data-rate="1"></i>';
            }
            var list = '<li>';
            list += '<div class="profile-rating-wrapper">';
            list += ' <div class="profile-pic"><img src="images/profile_pic.png" alt="" /></div>';
            list += '<div class="name">'+data[0].value+' Wrote:</div>';
            list += '<div class="rating">'
            list += rating;
            list += '</div>';
            list += '</div>';
            list += '<div class="content">';
            list += '<p>'+data[2].value+'</p>';
            list += '</div>';
            list += '</li>';
            return list;
    }

});

Answer 3

对于CSS，您可以尝试这样操作：

<style>
    #star-rating li {
        display: inline-block;
    }

    #star1:hover, #star2:hover, #star3:hover, #star4:hover, #star5:hover,
    #star2:hover ~ #star1, #star3:hover ~ #star1, #star3:hover ~ #star2, 
    #star4:hover ~ #star1, #star4:hover ~ #star2, #star4:hover ~ #star3, 
    #star5:hover ~ #star1, #star5:hover ~ #star2, #star5:hover ~ #star3, 
    #star5:hover ~ #star4 {
        color: orange;
    }
</style>

HTML：

<ul id="star-rating">
    <li><span onclick="testfunc(1)"><i id="star1" class="fas fa-star"></i></span></li>
    <li><span onclick="testfunc(2)"><i id="star2" class="fas fa-star"></i></span></li>
    <li><span onclick="testfunc(3)"><i id="star3" class="fas fa-star"></i></span></li>
    <li><span onclick="testfunc(4)"><i id="star4" class="fas fa-star"></i></span></li>
    <li><span onclick="testfunc(5)"><i id="star5" class="fas fa-star"></i></span></li>
</ul>

JS：

<script>
    starValue => {
        alert('Star Rating Selected: ' + starValue);
    }
</script>

应该工作：）

如果没有，您可以将CSS中的“〜”替换为“ +”

如何使用jQuery进行星级评定？

3 个答案:

如何获取上次选择的起始值？