为什么不论点亮那个，都是点亮第二组呢？第一组点不亮？可以帮我看一下代码嘛？
林念志祥
2018-11-13 10:54
<!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>2回答
-
- 慕UI7829676
- 2019-02-22 10:55:04
我的也是这个问题，不管几组星星，只有最后一组事件有反应，操作其他星星，也是最后一组有反应
-
- qq_幸福落雨_0
- 2018-11-15 19:16:44
<!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>
<!--你漏了分号很多个。在你代码基础上，我在后面注释了//zql，现在可以运行了。有问题企鹅我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>
星级评分原理和实现（上）
25809 学习 · 109 问题
相似问题