Custom simple Amazon-type star rating using jquery :lt

Question

So I'm trying to make the rating system where you mouse over say the 4th star and it highlights all the ones up to that one. I have looked through many of the posts on here and there are a lot of alternatives that quite frankly would probably be easier, but I like to do things myself, this is just for fun anyways. Basically it's just bugging me that I can't get this working.

$(document).ready(function() {
 $(".star")
 .hover(

  function(){

  var n = $('#stars>.starHolder>.star').index(this);
  alert(n);
      $('.star:lt(n)').css('left', '-27px' );
  },
  function(){
      $('.star:lt(n)').css('left', '0px' );
      }
    );              
});

This is what I have, and if instead of the :lt(n) I put :lt(5) or any number, it works exactly as intended; I have the jQuery sliding it to the left and back for each of 10 images. My only problem is that the variable part of it won't work. There I have the alert set to display n and it shows a number just as I would expect, but it doesn't pass through to the function. I don't get any errors in Firebug. Clearly Javascript is not my forte, so be gentle please :) Thanks!

Answer 1

n in lt(n) is not variable try to use

$('.star:lt('+n+')')