PHP五星評級 - 星星不繼續點擊

Question

我已經使用了五星評級系統（基於jQuery和PHP）的我的一個客戶提供in this link。現在，他們希望如果用戶對產品進行評價，那麼許多恆星應該保持高亮顯示，但在目前的情況下，一旦用戶移出鼠標，恆星不再高亮顯示。

我已經嘗試了很多，但與click功能mouseout功能衝突。到目前爲止，我使用這個：

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)方法不知道知道，無論用戶是否真正投了票。
您可以通過修改你的「click」事件處理程序，並在您的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部分可能是錯誤的 - 但據我所知它應該像這樣工作。

---

如果你想在widget中顯示用戶的投票頁面已經被重新加載即使，你將不得不在own_voting字段添加到您的服務器對抓取AJAX調用響應。