2010-01-26 1 views
2

У меня возникли проблемы с преобразованием этого 5-звездочного рейтингового скрипта, который отлично работает с версией jquery, выпущенной по дате: 2006-09-07 10:12:12 + 0200 (Do, 07 Sep 2006) $ * $ Rev: 276 $Проблема с преобразованием 5-звездочного рейтингового скрипта для работы с jQuery v1.3.2

Это функция addclass, removeeclass, .extend, которая, по моему мнению, является проблемой, но я не могу успешно конвертировать ее для работы с jquery v1. 3,2?

На самом деле это необходимо для работы как можно скорее.

Спасибо за вашу помощь ... stackoverflow.com РОКИ!

Вот как вы это называете:

<script type="text/javascript"> 
$(document).ready(function() { 
$('#rate1').rating('postid', { maxvalue:5 }); 
}); 
</script> 
<div id="rate1" class="rating">&nbsp;</div> 

Heres CSS-код:

.rating { 
    cursor: pointer; 
    margin: 0em; 
    display: block; 
    float:left; 
} 
.rating:after { 
    content: '.'; 
    display: block; 
    height: 0; 
    width: 0; 
    clear: both; 
    visibility: hidden; 
} 
.cancel, 
.star { 
    float: left; 
    width: 25px; 
    height: 25px; 
    overflow: hidden; 
    text-indent: -999em; 
    cursor: pointer; 
} 
.cancel, 
.cancel a {background: url(delete.gif) no-repeat 0 -25px;} 

.star, 
.star a {background: url(star.gif) no-repeat 0 0px;} 

.cancel a, 
.star a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    background-position: 0 0px; 
} 

div.rating div.on a { 
    background-position: 0 -25px; 
} 
div.rating div.hover a, 
div.rating div a:hover { 
    background-position: 0 -50px; 
} 

И Heres рейтинг сценария:

function postrating(i) { 
    $("#rate_result").html(i); 
} 

function doSubmit() { 
     var rating = $('#result').html(); 
     var reviewid = $('#reviewid').html(); 
     if(rating == '1') { 
      alert('Are you kidding me!'); 
     } 
     if(rating == '5') { 
      alert('Thanks for the 5 star rating!'); 
     } 
     alert(rating); 
     alert(reviewid); 
} 

$.fn.rating = function(id, options) { 
    if(id == null) return; 
    var settings = { 
     id  : id, // post changes to 
     maxvalue : 5, // max number of stars 
     curvalue : 0 // number of selected stars 
    }; 
    if(options) { 
     $.extend(settings, options); 
    }; 
    $.extend(settings, {cancel: (settings.maxvalue > 1) ? true : false}); 
    var container = jQuery(this); 
    $.extend(container, { 
      averageRating: settings.curvalue, 
      id: settings.id 
     }); 
    for(var i= 0; i <= settings.maxvalue ; i++){ 
     var size = i 
     if (i == 0) { 
      if(settings.cancel == true){ 
       var div = ''; 
       container.append(div); 
      } 
     } 
     else { 
      var div = '<div class="star"><a href="javscript:void(0)" onclick="javscript:postrating('+ i +');" title="'+i+' out of 5">'+i+'</a></div>'; 
      container.append(div); 
     } 
    } 
    var stars = $(container).children('.star'); 
    stars 
      .mouseover(function(){ 
       event.drain(); 
       event.fill(this); 
      }) 
      .mouseout(function(){ 
       event.drain(); 
       event.reset(); 
      }) 
      .focus(function(){ 
       event.drain(); 
       event.fill(this) 
      }) 
      .blur(function(){ 
       event.drain(); 
       event.reset(); 
      }); 
      stars.click(function(){ 
      if(settings.cancel == true) { 
      settings.curvalue = stars.index(this) + 1; 
      $.post(container.id, { 
       "rating": $(this).children('a')[0].href.split('#')[1] 
      }); 
      return false; 
      } 
      else if(settings.maxvalue == 1) { 
      settings.curvalue = (settings.curvalue == 0) ? 1 : 0; 
      $(this).toggleClass('on'); 
      $.post(container.id, { 
       "rating": $(this).children('a')[0].href.split('#')[1] 
      }); 
      return false; 
     } 
     return true; 
    }); 
    var event = { 
     fill: function(el){ // fill to the current mouse position. 
      var index = stars.index(el) + 1; 
      stars 
       .children('a').css('width', '100%').end() 
       .lt(index).addClass('hover').end(); 
     }, 
     drain: function() { // drain all the stars. 
      stars 
       .filter('.on').removeClass('on').end() 
       .filter('.hover').removeClass('hover').end(); 
     }, 
     reset: function(){ // Reset the stars to the default index. 
      stars.lt(settings.curvalue).addClass('on').end(); 
     } 
    }   
    event.reset(); 
    return(this); 
} 
+0

Вы получаете ошибки? – czarchaic

+0

Нет! 5 звезд появляются, но когда вы выделяете их ... как если бы вы выделили четвертую звезду, предыдущие четыре звезды не подсвечиваются и когда вы нажимаете ... как если бы вы нажмете на 3-ей звезду ... предыдущие 3 звезды не выделяется, но я получаю значение от звезды, когда вы нажимаете на нее. 1,2,3,4,5 – brandon

+0

Ох ... звезда, нависшая над вами, меняет от серого до желтого! – brandon

ответ

2

.lt() не является собственной функцией. Вы ищете селектор :lt(). Используйте переключатель .filter, чтобы использовать селектор :lt(). Проверьте код, в котором вы написали .lt(foo) и вместо того, чтобы написать что-то вроде:

.filter(":lt(" + foo + ")") 

В качестве альтернативы, вы можете захотеть взглянуть на .prevAll()

 Смежные вопросы

  • Нет связанных вопросов^_^