0

このリンクでクライアントの 1 つに提供されている 5 つ星評価システム (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部分が間違っているかもしれませんが、私の知る限り、このように動作するはずです。

ページがリロードされた後でもウィジェットにユーザーの投票を表示する場合は、own_votingAJAX 呼び出しの取得に対するサーバーの応答にフィールドを追加する必要があります。

于 2013-05-09T13:08:54.027 に答える