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

回答

相关问题