Question

I’m having trouble converting this 5 star rating script that works perfect with jquery revision put out on Date: 2006-09-07 10:12:12 +0200 (Do, 07 Sep 2006) $* $Rev: 276 $

It’s the addclass, removeclass, .extend functions that I think are the problem but I can’t seem to successfully convert it to work with jquery v1.3.2?

Really need this to work asap.

Thanks for all your help… stackoverflow.com ROCKS!

Heres how you call it:

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

Heres the 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;
}

And heres the rating script:

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);
}

Answer 1

.lt() is not a proper function. You are looking for the :lt() selector. Use a .filter in order to use the :lt() selector. Check your code where you have written .lt(foo) and instead write something like:

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

Alternatively, you may want to look at .prevAll()