PHP 五星级评级 - 星星不会一直被点击

Question

我为我的一位客户使用了in this link 提供的五星级评级系统（基于 jquery 和 PHP）。现在，他们希望如果用户对产品进行评分，那么这些星星数量应该保持突出显示，但在当前场景中，一旦用户移开鼠标，星星就不再保持突出显示。

我尝试了很多，但 mouseout 函数与 click 函数冲突。到目前为止，我正在使用这个：

HTML

 <div id="r1" class="rate_widget">
    <div class="star_1 ratings_stars" id="1"></div>
    <div class="star_2 ratings_stars" id="2"></div>
    <div class="star_3 ratings_stars" id="3"></div>
    <div class="star_4 ratings_stars" id="4"></div>
    <div class="star_5 ratings_stars" id="5"></div>
    <div class="total_votes">vote data</div>
</div>

JS - 我自己做了一些调整，但没有成功。

 $(document).ready(function() {
    
    $('.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');
            // can't use 'this' because it wont contain the updated data
            set_votes($(this).parent());
        }
    );
    
    
    // This actually records the vote
    $('.ratings_stars').bind('click', function() {
        var star = this;
        var widget = $(this).parent();
        count = $(star).attr('id');
        var clicked_data = {
            clicked_on : $(star).attr('class'),
            widget_id : $(star).parent().attr('id')
        };
        $.post(
            'ratings.php',
            clicked_data,
            function(INFO) {
                widget.data( 'fsr', INFO );
                set_votes(widget);
//$(this).prevAll().andSelf().addClass('ratings_over');
    //        $(this).nextAll().removeClass('ratings_vote'); 
        $('#msg').hide().html("you have rated this product with "+count+" stars.").fadeIn(1500);
        //alert("you have rated this product with"+count);
            },
            'json'
        ); 
    });
    
    
    
});

function set_votes(widget) {

    var avg = $(widget).data('fsr').whole_avg;
    var votes = $(widget).data('fsr').number_votes;
    var exact = $(widget).data('fsr').dec_avg;

    window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);
    
    $(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
   // $(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote'); 
    $(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}

在当前情况下，一旦点击星星，它就会显示从 PHP 计算脚本返回的更新后的平均评分。

我希望星星在点击后保持突出显示，即使在 mouseout 之后，如果没有点击它们，mouseout 应该按原样运行，即取消突出显示星星。

请帮忙，我很绝望。

Answer 1

在其当前设置中，set_votes(widget) 方法不知道用户是否实际投票。
您可以通过修改“点击”事件处理程序并在 AJAX 成功回调中添加一条数据来轻松添加它：

...
function(INFO) {
    widget.data( 'fsr', INFO );
    // Add user's voting to data:
    widget.data('fsr').own_voting = count;

    set_votes(widget); 
    $('#msg').hide().html("you have rated this product with "+count+" stars.").fadeIn(1500);
    //alert("you have rated this product with"+count);
}
...

然后，您还必须修改set_votes(widget) 方法以使用此信息：

function set_votes(widget) {

    var avg = $(widget).data('fsr').whole_avg;
    var votes = $(widget).data('fsr').number_votes;
    var exact = $(widget).data('fsr').dec_avg;

    var own = $(widget).data('fsr').own_voting;

    // set voting to own if it is defined, else to avg
    // also set class to distinguish avg from own
    if(typeof own != 'undefined') {
        voting = own;
            class = 'ratings_over';
    } else {
        voting = avg;
            class = 'ratings_vote';
    }

    window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);

    // replaced avg with voting
    // remove all classes to make sure nothing bugs
    $(widget).find('.star_' + voting).nextAll()
             .removeClass('ratings_vote').removeClass('ratings_over');
    $(widget).find('.star_' + voting).prevAll().andSelf()
             .removeClass('ratings_vote').removeClass('ratings_over').addClass(class); 
    $(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}

我对 JS 不是很熟悉，所以 undefined 部分可能是错误的 - 但 AFAIK 它应该像这样工作。

---

如果您希望小部件即使在页面重新加载后也显示用户的投票，则必须将 own_voting 字段添加到服务器对获取 AJAX 调用的响应中。