0

我已经为我的一位客户使用了此链接中提供的五星级评分系统（基于 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应该按原样发挥作用，即取消突出显示星星。

请帮忙，我很绝望。

4

1 回答 1

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 调用的响应中。

于 2013-05-09T13:08:54.027 回答