替代jquery評級插件？

Question

標題不是很明顯，但我會盡力解釋。

我在找一個jQuery插件等級它的行爲像一個標準的星級，但支持不同的圖像和顏色取決於所選擇的值

例如，在1-10規模：

• 1-3盤旋或選擇的所有圖像時/顏色是紅色
• 4-7盤旋或選擇的所有圖像時/顏色是黃色
• 8-10盤旋或選擇的所有圖像時/顏色是綠色

我找到了this和this。但他們並不完全符合我的要求。

所以，如果有人知道是否有什麼東西可以節省我很多時間來創建一個新的插件。

Answer 1

爲什麼不讓自己做？我已經建立了一個小小的演示來證明它是可能的：http://jsfiddle.net/s2zPW/18/。

的代碼並不難之一：

HTML：

<ul class="rating"></ul> 

的JavaScript：

$.fn.reverse = function() { 
    return this.pushStack(this.get().reverse(), arguments); 
}; 

// create two new functions: prevALL and nextALL. they're very similar, hence this style. 
$.each(['prev', 'next'], function(unusedIndex, name) { 
    $.fn[name + 'ALL'] = function(matchExpr) { 
     // get all the elements in the body, including the body. 
     var $all = $('body').find('*').andSelf(); 

     // slice the $all object according to which way we're looking 
     $all = (name == 'prev') ? $all.slice(0, $all.index(this)).reverse() : $all.slice($all.index(this) + 1); 
     // filter the matches if specified 
     if (matchExpr) $all = $all.filter(matchExpr); 
     return $all; 
    }; 
}); 

for (var i = 0; i < 10; i++) { 
    $('.rating').append('<li>' + i + '</li>'); 
} 

$('.rating li').hover(function() { 
    if ($(this).index() < 2) { 
     $(this).prevALL('li').css('background-color', 'rgb(255, 160, 160)'); 
    } else if ($(this).index() < 4) { 
     $(this).prevALL('li').css('background-color', 'rgb(255, 200, 200)'); 
    } else if ($(this).index() < 7) { 
     $(this).prevALL('li').css('background-color', 'rgb(235, 220, 200)'); 
    } else if ($(this).index() < 10) { 
     $(this).prevALL('li').css('background-color', 'rgb(200, 255, 200)'); 
    } 
}, function() { 
    $(this).parent().children().css('background-color', 'rgb(200, 200, 200)'); 
});