Question

我用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>

JQUERY：

$('.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
});

Answer 1

猜猜是因为你没有说出你期望发生的事情。可能需要突出显示所选的评级以及之前的星号。

所以不是这个

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

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

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

但我也会删除悬停类，以便用户点击

时显而易见

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

<强> Demo

Answer 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>

JQuery 5星评级系统

2 个答案: