jQuery 5 星评级系统答案

【问题标题】：JQuery 5 star rating systemjQuery 5 星评级系统
【发布时间】：2015-08-19 16:15:19
【问题描述】：

我正在使用 html php 和 jquery 创建一个 5 星评级系统，当用户点击评级时，我不知道如何停止星评级。在我的代码中，当用户点击 4 颗星时，警报框会显示 4 颗星，但是当用户将鼠标从星星上移开时，星星会显示 0 分。

这是我的代码，我不会在这里发布 css

HTML：

<div class="rating">
    <div class="ratings_stars" data-rating="1"></div>
    <div class="ratings_stars" data-rating="2"></div>
    <div class="ratings_stars" data-rating="3"></div>
    <div class="ratings_stars" data-rating="4"></div>
    <div class="ratings_stars" data-rating="5"></div> 
</div>

查询：

$('.ratings_stars').hover(
    // Handles the mouseover
    function() {
        $(this).prevAll().andSelf().addClass('ratings_over');
        $(this).nextAll().removeClass('ratings_vote'); 
    },
    // Handles the mouseout
    function() {
        $(this).prevAll().andSelf().removeClass('ratings_over');

    }
);



$('.ratings_stars').click(function() {
   $('.ratings_stars').removeClass('selected'); // Removes the selected class from all of them
   $(this).addClass('selected'); // Adds the selected class to just the one you clicked

   var rating = $(this).data('rating');
   alert(rating);
    // Get the rating from the selected star
   $('#rating').val(rating); // Set the value of the hidden rating form element
});

【问题讨论】：

你能创建一个 jsfiddle 吗？
在不知道您期望发生什么的情况下无法回答。

标签： php jquery html

【解决方案1】：

猜测是因为你没有说出你期望发生的事情。您可能希望突出显示选定的评分及其前面的星星。

所以不是这个

$(this).addClass('selected');

你使用这个，类似于你以前的方式。

$(this).prevAll().andSelf().addClass('selected');

但我也会删除悬停类，以便用户在点击时很明显

$(this).prevAll().andSelf().addClass('selected').removeClass('ratings_over');

Demo

【讨论】：

【解决方案2】：

<!--SAVE AS WHATEVAUWANNA.HTML AND TEST-->
<html> 
    <head>
        <title>Rating System jQuery Plug by Aldanis Vigo</title>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
        <style type='text/css' language='css'>
            .record{
                opacity: .50;
            }
            #value-display{
                position:  relative;
                top:  -5px;
                margin-left: 10px;
                color:  orange;
                font-weight:  bold;
            }
        </style>
    </head>
    <body>
        <span value='0' id='ratingbar'>
            <img class='record' number='1'/>
            <img class='record' number='2'/>
            <img class='record' number='3'/>
            <img class='record' number='4'/>
            <img class='record' number='5'/>
            <span id='value-display'>0 / 5</span>
        </span>         
    </body>
    <script>
        //Change these variables to your liking!!
        var iconsrc = 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Record2.png';
        var iconwidth = '20px';
        var iconheight = '20px';

        var value = $('#ratingbar').attr('value');

        $('#ratingbar img').each(function(){
            //Set the icon for each
            $(this).attr('src', iconsrc);
            $(this).attr('width', iconwidth);
            $(this).attr('height', iconheight);

            $(this).hover( function(){
                $(this).css('opacity','1');
                $(this).prevAll().css('opacity','1');           
            });

            $(this).click( function(){
                //Clear all of them
                $(this).parent().attr('value',$(this).attr('number'));
                $(this).parent().children('#value-display').html($(this).attr('number') + ' / 5');                                

                                                 //Color up to the selected ones.
                $('#ratingbar img').each( function(){
                    if($(this).attr('number') <= $(this).parent().attr('value')){
                        $(this).css('opacity','1');
                    }else{
                        $(this).css('opacity','.50');
                    }
                }); 
            });

            $(this).mouseout( function(){
                $(this).css('opacity','.50');
                $(this).prevAll().css('opacity','.50');
                //Color up to the selected ones.
                $('#ratingbar img').each( function(){
                    if($(this).attr('number') <= $(this).parent().attr('value')){
                        $(this).css('opacity','1');
                    }
                });
            });
        });     
    </script>
</html>

【讨论】：

添加一些解释，说明此答案如何帮助 OP 解决当前问题
它给了他一个使用 jQuery 的评级插件。如果您阅读代码，您会在第一行非常清楚地注意到它所说的。使用 .html 扩展名随意命名并对其进行测试。这应该很简单吧？