jQuery - Sternchen Bewertungssystem

index.html

<ul id="rating">
  <li class="star_off"><a title="Ich vergebe dem Rezept 1 Punkt" href="?star=1">Ich vergebe dem Rezept 1 Punkt</a></li>
  <li class="star_off"><a title="Ich vergebe dem Rezept 2 Punkte" href="?star=2">Ich vergebe dem Rezept 2 Punkte</a></li>
  <li class="star_off"><a title="Ich vergebe dem Rezept 3 Punkte" href="?star=3">Ich vergebe dem Rezept 3 Punkte</a></li>
  <li class="star_off"><a title="Ich vergebe dem Rezept 4 Punkte" href="?star=4">Ich vergebe dem Rezept 4 Punkte</a></li>
  <li class="star_off"><a title="Ich vergebe dem Rezept 5 Punkte" href="?star=5">Ich vergebe dem Rezept 5 Punkte</a></li>
</ul>

script-1.js

$('.star_off').mouseover(function(){
  $(this).removeClass('star_off').addClass('star_on');
  $(this).prevAll('.star_off').removeClass('star_off').addClass('star_on');
  $(this).nextAll('.star_on').removeClass('star_on').addClass('star_off');
});

script-2.js

$('#rating').hover(function(){
  // Vorherige Sterne aktivieren und nachkommende ausblenden
});

script-3.js

$(document).ready(function() {
  $('#rating').hover(function(){
    // Vorherige Sterne aktivieren und nachkommende ausblenden
  }, function() {
    $('.star_on').removeClass('star_on').addClass('star_off');
  });
});

script-4.js

$(document).ready(function() {
  $('#rating').hover(function(){
    $('.star_off').mouseover(function(){
      $(this).removeClass('star_off').addClass('star_on');
      $(this).prevAll('.star_off').removeClass('star_off').addClass('star_on');
      $(this).nextAll('.star_on').removeClass('star_on').addClass('star_off');
    });
  }, function() {
    $('.star_on').removeClass('star_on').addClass('star_off');
  });
});

script-comment-1140.js

// Gewählten Wert in einer Variable speichern
$('#rating a').click(function(e) {
  e.preventDefault();
  
  // Über DOM
  var rating = $(this).parent().index() + 1;
  
  // Über Parameter
  var rating = $(this).attr('href').split('=')[1]
  
  // Mache etwas mit der Zahl
});

style-1.css

#rating li {
  float:left;
}

style-2.css

#rating li.star_off {
  background:url('lib/images/star_off_48.png') no-repeat left top;
}

style-3.css

#rating li.star_on {
  background:url('lib/images/star_48.png') no-repeat left top;
}

style-4.css

#rating a {
  display:block;
  font-size:0px;
  width:48px;
  height:48px;
}