<ul id="rating" class="rating">

<li class="rating-item" title="很不好"></li>

<li class="rating-item" title="不好"></li>

<li class="rating-item" title="一般"></li>

<li class="rating-item" title="好"></li>

<li class="rating-item" title="很好"></li>

</ul>

<ul id="rating" class="rating">

<li class="rating-item" title="很不好"></li>

<li class="rating-item" title="不好"></li>

<li class="rating-item" title="一般"></li>

<li class="rating-item" title="好"></li>

<li class="rating-item" title="很好"></li>

</ul>

<script>

? ? ? ?// 自我執行的匿名函數，不需要調用

? ? ?var rating = (function() {

? ? ? ?var lightOn = function($item,num) {

? ? ? ? ? ?$item.each(function(index) {

? ? ? ? ? ? ?if (index < num) {

? ? ? ? ? ? ? ?$(this).css("background-position", "0 -26px");

? ? ? ? ? ? ?} else {

? ? ? ? ? ? ? ?$(this).css("background-position", "0 0");

? ? ? ? ? ? ?}

? ? ? ? ? ?});

? ? ? ? ?};

? ? ? ?var init = function(el, num) {

? ? ? ? ?var $rating = $(el);

? ? ? ? ?var $item = $rating.find(".rating-item");

? ? ? ? ?lightOn($item,num);

? ? ? ? ?//事件委托，子元素事件委托給父元素處理

? ? ? ? ?$rating

? ? ? ? ? ?.on("mouseover", ".rating-item", function() {

? ? ? ? ? ? ?lightOn($item,$(this).index() + 1);

? ? ? ? ? ?})

? ? ? ? ? ?.on("click", ".rating-item", function() {

? ? ? ? ? ? ?num = $(this).index() + 1;

? ? ? ? ? ?})

? ? ? ? ? ?.on("mouseout",function() {

? ? ? ? ? ? ?lightOn($item,num);

? ? ? ? ? ?});

? ? ? ?};

? ? ? ?//Jquery插件

? ? ? ?$.fn.extend({

? ? ? ? ? ?rating:function(num){

? ? ? ? ? ? ?console.log(this);

? ? ? ? ? ? ?return this.each(function(){

? ? ? ? ? ? ? ? ?init(this,num)

? ? ? ? ? ? ?});

? ? ? ? ? ?// return init(this,num)

? ? ? ? ? ?}

? ? ? ?});

? ? ? ?return{

? ? ? ? ? ?init:init

? ? ? ?};

? ? ?})();

? ? ?rating.init('#rating',3);

????// $('#rating').rating(1)

? ?</script>