5星級評分所需的幫助 - Jquery

我正試圖建立一個星級評分系統。我現在使用的代碼執行以下操作：5星級評分所需的幫助 - Jquery

高亮明星當鼠標懸停在，但是當鼠標被刪除恢復到以前的狀態。

我想爲其添加以下功能：當我點擊一顆星星時，即使將星星從鼠標上移開，我點擊的星星數量仍應保持高亮顯示。

任何人都可以幫助我嗎？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd" 
    > 
<html lang="en"> 
<head> 
    <title>AJAX 5 Star Rating</title> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 

    // This is the first thing we add ------------------------------------------ 
    $(document).ready(function() { 

     $('.rate_widget').each(function(i) { 
      var widget = this; 
      var out_data = { 
       widget_id : $(widget).attr('id'), 
       fetch: 1 
      }; 
      $.post(
       'ratings.php', 
       out_data, 
       function(INFO) { 
        $(widget).data('fsr', INFO); 
        set_votes(widget); 
       }, 
       'json' 
      ); 
     }); 


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

      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); 
       }, 
       '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)'); 
    } 
    // END FIRST THING 








    </script> 

    <style> 
     .rate_widget { 
      border:  1px solid #CCC; 
      overflow: visible; 
      padding: 10px; 
      position: relative; 
      width:  180px; 
      height:  32px; 
     } 
     .ratings_stars { 
      background: url('star_empty.png') no-repeat; 
      float:  left; 
      height:  28px; 
      padding: 2px; 
      width:  32px; 
     } 
     .ratings_vote { 
      background: url('star_full.png') no-repeat; 
     } 
     .ratings_over { 
      background: url('star_highlight.png') no-repeat; 
     } 
     .total_votes { 
      background: #eaeaea; 
      top: 58px; 
      left: 0; 
      padding: 5px; 
      position: absolute; 
     } 
     .event_choice { 
      font: 10px verdana, sans-serif; 
      margin: 0 auto 40px auto; 
      width: 180px; 
     } 
     h1 { 
      text-align: center; 
      width: 400px; 
      margin: 20px auto; 
     } 
    </style> 
</head> 
<body> 
<h1> Rate the event! </h1> 
<div class='event_choice'> 
    Rate: Raiders of the Lost Ark 
    <div id="r1" class="rate_widget"> 
     <div class="star_1 ratings_stars"></div> 
     <div class="star_2 ratings_stars"></div> 
     <div class="star_3 ratings_stars"></div> 
     <div class="star_4 ratings_stars"></div> 
     <div class="star_5 ratings_stars"></div> 
     <div class="total_votes">vote data</div> 
    </div> 
</div> 

<div class='event_choice'> 
    Rate: The Hunt for Red October 
    <div id="r2" class="rate_widget"> 
     <div class="star_1 ratings_stars"></div> 
     <div class="star_2 ratings_stars"></div> 
     <div class="star_3 ratings_stars"></div> 
     <div class="star_4 ratings_stars"></div> 
     <div class="star_5 ratings_stars"></div> 
     <div class="total_votes">vote data</div> 
    </div> 
</div> 
</body> 
</html>

來源

2010-12-04 Sharat Chandra

我建議在視覺上剛剛超過（）'例行過的方式懸停相同設置的收視率在`點擊，然後解除綁定懸停程序。 – Orbling 2010-12-04 02:50:24

我不得不承認我是一個完全新手Jquery的東西。我直覺地感覺到，我必須在//中處理鼠標移動 function（）{（this）.prevAll（）。andSelf（）。removeClass（'ratings_over'）; //不能使用'this'，因爲它不會包含 – 2010-12-04 02:59:09

我發現了一個great CSS only way of doing the hover effects。保持星星突出顯示仍然需要一些JavaScript，但少得多。

一般的想法是，你有一個背景圖像（明星）爲ul的設置長度（在你的情況下，5倍的圖像的寬度，5星），並重復整個x-軸（background: url(star.gif) repeat-x;）。每個<a>設置爲不同的寬度（5星的20％，40％，60％，80％，100％），並放在不同的z-索引上。

下面是筆者的想法的更新，這是一個有點接近你的使用情況：

HTML：

<div class='rate_widget'> 
    <ul> 
     <li><a href='#' class='one-star'>1</a></li> 
     <li><a href='#' class='two-stars'>2</a></li> 
     <li><a href='#' class='three-stars'>3</a></li> 
     <li><a href='#' class='four-stars'>4</a></li> 
     <li><a href='#' class='five-stars'>5</a></li> 
    </ul> 
</div>

CSS：

.rate_widget ul{ 
    background: url(star_empty.png) repeat-x; 
} 

.rate_widget a:hover{ 
    background: url(star_highlight.png) repeat-x; 
} 

.rate_widget a:active, 
.rate_widget a:focus, 
.rate_widget a.checked{ 
    background: url(star_full.png) repeat-x; 
} 

.rate_widget ul{ 
    position:relative; 
    width:125px; /*5 times the width of your star*/ 
    height:25px; /*height of your star*/ 
    overflow:hidden; 
    list-style:none; 
    margin:0; 
    padding:0; 
    background-position: left top; 
} 

.rate_widget li{ 
    display: inline; 
} 

.rate_widget a{ 
    position:absolute; 
    top:0; 
    left:0; 
    text-indent:-1000em; 
    height:25px; /*height of your star*/ 
    line-height:25px; /*height of your star*/ 
    outline:none; 
    overflow:hidden; 
    border: none; 
} 

.rate_widget a.one-star{ 
    width:20%; 
    z-index:6; 
} 

.rate_widget a.two-stars{ 
    width:40%; 
    z-index:5; 
} 

.rate_widget a.three-stars{ 
    width:60%; 
    z-index:4; 
} 

.rate_widget a.four-stars{ 
    width:80%; 
    z-index:3; 
} 

.rate_widget a.five-stars{ 
    width:100%; 
    z-index:2; 
} 

.rate_widget a.checked{ 
    z-index:1; 
}

的Javascript：

$('.rate_widget a').click(function(){ 
    // make sure the chosen star stays selected 
    var star = $(this); 
    star.closest('ul').find('.checked').removeClass('checked'); 
    star.addClass('checked'); 

    //whatever else you want to do when something gets clicked 
});

他再是一個小提琴看到它在行動：http://www.jsfiddle.net/BHaTu/

來源

2010-12-04 03:08:35 munch

5星級評分所需的幫助 - Jquery

回答

相關問題