<!DOCTYPE?html>
<html?leng="zh-CN">
<head>
????<meta?charset="UTF-8"/>
????<title>星級評分--第二種方式</title>
????<style>
????????body,ul,li{
????????????padding:?0;
????????????margin:?0;
????????}
????????li{
????????????list-style-type:?none;
????????}
????????.rating{
????????????width:150px;
????????????height:?27px;
????????????margin:100px?auto;
????????}
????????.rating-item{
????????????float:left;
????????????width:30px;
????????????height:?27px;
????????????background:url(img/start1.PNG)?no-repeat;
????????????cursor:pointer;
????????}
????</style>
</head>
<body>
?<ul?class="rating"?id="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?class="rating"?id="rating2">
?????<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?src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
????//閉包
???var?rating=?(function()?{
???????//點亮
???????var?lightOn?=?function?($item,?num)?{
???????????$item.each(function?(index)?{
???????????????if?(index?<?num)?{
???????????????????$(this).css('background-position',?'0?-45px');
???????????????}?else?{
???????????????????$(this).css('background-position',?'0?-15px');
???????????????}
???????????})
???????};
???????var?init?=?function?(el,?num)?{
???????????//緩存父容器
???????????var?$rating?=?$(el)
???????????//緩存變量
???????????$item?=?$rating.find('.rating-item')
???????????//初始化
???????????lightOn($item,?num)
???????????//事件（委托）綁定(子元素委托給父元素處理?rating-item?給$rating頭兩個是事件委托，最后一個是綁定，由于名字相同，就都用.表示了)
???????????$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){
???????????????return?this.each(function(){
???????????????????init(this,num);
???????????????????//this相當于el；
???????????????})
???????????}
???????})
????????return?{
????????????//返回一個對象(對象是一個方法)
????????????init:init
????????}
????})();
????rating.init("#rating",2);
????rating.init("#rating2",3);
???//$("#rating2").rating(4);
</script>
</body>
</html>
2019-02-22
我的也是這個問題，不管幾組星星，只有最后一組事件有反應(yīng)，操作其他星星，也是最后一組有反應(yīng)
2018-11-15
<!DOCTYPE html>
<html leng="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>星級評分--第二種方式</title>
<style>
body,ul,li{ ????????????padding:?0; ????????????margin:?0; ????????} ????????li{ ????????????list-style-type:?none; ????????} ????????.rating{ ????????????width:150px; ????????????height:?27px; ????????????margin:100px?auto; ????????} ????????.rating-item{ ????????????float:left; ????????????width:30px; ????????????height:?27px; ????????????background:url(img/start1.PNG)?no-repeat; ????????????cursor:pointer; ????????}</style>
</head>
<body>
<!--你漏了分號很多個。在你代碼基礎(chǔ)上，我在后面注釋了//zql，現(xiàn)在可以運行了。有問題企鵝我780325930-->
<ul class="rating" id="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 class="rating" id="rating2">
<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 src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
//閉包
var rating= (function() {
//點亮
var lightOn = function ($item, num) {
$item.each(function (index) {
if (index < num) {
$(this).css('background-position', '0 -45px');
} else {
$(this).css('background-position', '0 -15px');
}
});//分號zql
};
var init = function (el, num) {
//緩存父容器
var $rating = $(el),//逗號zql
//緩存變量
$item = $rating.find('.rating-item');//zql分號
//初始化
lightOn($item, num);//zql分號
//事件（委托）綁定(子元素委托給父元素處理 rating-item 給$rating頭兩個是事件委托，最后一個是綁定，由于名字相同，就都用.表示了)
$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);
});//zql分號
};
//JQuery插件
$.fn.extend({
rating:function(num){
return this.each(function(){
init(this,num);
//this相當于el；
});//zql分號
}
});//zql分號
return {
//返回一個對象(對象是一個方法)
init:init
};//zql分號
})();
rating.init("#rating",2);
rating.init("#rating2",3);
//$("#rating2").rating(4);
</script>
</body>
</html>