-
蒹葭苍沧
- 大佬，帮我看下，我的代码没有报错，但点亮不了星星，谢谢哈
- 2020-10-23 3回答·778浏览
-
Float东方未明
- 有大佬能看一下么，我这没有效果，默认点亮也没有，雪碧图24*46的，上半是空星
background-position 少了个D
- 2019-12-18 1回答·1286浏览
-
Float东方未明
- 这个图片是怎么搞的啊，老师两张图片怎么合的一张啊，我看老师只引用了一张啊，我也只插了一张
我引用的是灰色星图片，我还弄了张点亮的图片，这个怎么弄的啊
- 2019-12-18 1回答·1261浏览
-
慕勒1034978
- 为什么我选中后再移开还是，全不显示了。
- 2019-11-16 2回答·1311浏览
-
逆天剑帝
- 我就想知道我都搞成一模一样了，星星没半点反应
原来是这里出了问题
$item = $rating.find('.rating-item');
- 2019-10-21 3回答·1513浏览
-
极致艺术港仔
- 为什么我的是乱码的
<!DOCTYPE html>
<meta charset="utf-8">
这两句是不是没打
- 2019-10-21 1回答·1079浏览
-
蒹葭苍沧
- 代码一样，星星无变化
- 已采纳 Julian_Chance 的回答
没有引入jQuery库，在</head>之前插入jQuery即可
- 2019-08-13 2回答·1314浏览
-
慕的地6086637
- 你好，老师。为什么图片是这个效果？
li的css样式不对，样式应该左浮float:left;宽度和高度再加大一点；希望能帮到你
- 2019-04-14 1回答·1323浏览
-
画一个会跑的字
- 为什么星星不变化
- 已采纳 林不渡 的回答
$(this).css('background-possion','0 -40px'); background-position没拼对
- 2019-04-05 1回答·1271浏览
-
Pandora_小改
- 好奇怪啊，明明和老师一模一样，除了图片大小以外。运行的时候动不了，应该是事件绑定那里有问题，求大佬帮忙看一下
你运行的时候不打开控制台么？
打开控制台就能看到你错哪了，你那个
//初始化
lightOn(nun);你传参传错了是num
- 2019-01-14 1回答·1179浏览
-
慕丝8171553
- 请问 星星是两个为一张图片，灰色在上面，黄色的在下面，这个怎么实现的？代码好像没有这一段实现方式，为什么还是可以实现星级效果？
默认背景位置是图片左上角（0，0），li元素宽高设为灰色星星大小且不重复，这样每个li元素背景就只显示灰色星星，通过js改变css的background-position（背景定位）来改变li元素背景为黄色星星
- 2018-09-25 2回答·1466浏览
-
qq_演员_30
- 图片跟js哪里可以下载
老师并没有放出来，js可以跟着老师的步骤一步一步地写，图片通过ps或者illustrator可以轻松设计出来
- 2018-09-10 1回答·882浏览
-
ZMXZALXT
- LightOn()函数不是指索引小于2时点亮吗，在mouseover后运行函数时不也是得判断索引是不是小于2吗，小于2了才能点亮，为什么mouseover后每个都能点亮呢？
- 已采纳 郎友侯 的回答
因为在顶部先声明了 num=2,所以 初始化 LightOn(num)中进行了 索引小于 2 时点亮，但是在绑定mouseover 事件时，我们传递进去的参数不是 初始的num，而是 lightOn($(this).index()+1) 中的“$(this).index()+1”,它的意思是 此时触发 mouseover事件的子元素的下标+1，这个时候，如果你的鼠标放在第三颗星星上，传进去的参数就是 它的下标 2 +1=3，此时，所有index<3的 li元素 都会被点亮
- 2018-08-03 1回答·1381浏览
-
qq_小疯狂_0
- 图片哪里下载
http://i.niupic.com/images/2017/05/31/iVPGGC.png
- 2018-07-27 2回答·562浏览
-
夜阑卧听风吹雨y
- 没效果显示啊？
- 已采纳 郎友侯 的回答
你的这个jquery库地址不对，<script src="https://apps.bding.com/libs/jquery/2.1.4/jquery.min.js"></script>
，你可以到控制台上看一下报的错误，会提示 Uncaught ReferenceError: $ is not defined
试试这个地址<script src='https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js'></script>
- 2018-07-25 1回答·1353浏览
-
NoError2018
- 其实这三个方法里的 num 不是很理解 ，点击时继续lightOn(indexof()+1)不可以么？？？
嗯嗯 好的 谢谢 函数参数这块得多练练呀
- 2018-07-21 2回答·1573浏览
-
慕粉1472770932
- 'background-position'
- 已采纳 她是光 的回答
就是说星星是两个为一张图片，灰色在上面，黄色的在下面。然后开始是index<num，也就是小于2。他就会向上偏移26像素替换灰色的从而变成黄色的，就出现了有两颗星星默认是黄色，其实就是也就是-26px。其他的不变还是0,0也就是灰色。
我就是这么理解的 不知道能不能帮到你
- 2018-06-08 1回答·1382浏览
-
scj_wcl
- index
- 已采纳 qq_最初的最初_1 的回答
因为index方法获取下标识从零开始，获取个数就加一。
- 2018-05-01 2回答·1169浏览
-
大白宝宝
- 谁有写好的出效果了的源码啊，我对着视频写了好几遍都不出效果，求助大神！！！
拿走，不谢。有兴趣的可以来这里看看：https://github.com/CruxF/IMOOC
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>星级评分之第一种写法</title>
<style>
body, ul, li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.rating {
width: 190px;
height: 32px;
margin: 100px auto;
}
.rating-item {
display: inline-block;
width: 32px;
height: 32px;
background: url(img/star.png) no-repeat;
cursor: pointer;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</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>
<script>
//缓存、jQuery对象与DOM对象
var num = 2;
var $rating = $('#rating')
var $item = $rating.find('.rating-item');
// 点亮
var lightOn = function(num) {
$item.each(function(index) {
if(index < num) {
$(this).css('background-position', '0 -40px');
} else {
$(this).css('background-position', '0 0');
}
})
}
// 初始化
lightOn(num);
// 事件绑定
$item.on('mouseover', function() {
console.log($(this).index());
lightOn($(this).index() + 1);
}).on('click', function() {
num = $(this).index() + 1;
});
$rating.on('mouseout', function() {
lightOn(num);
})
</script>
</body>
</html>
- 2018-04-20 2回答·1148浏览
-
宝慕林9769270
- 调用each方法无效，求解
item代表的是什么？
- 2018-03-25 2回答·1725浏览
-
余影拾光
- 鼠标点击离开后才执行函数，帮看看错在哪里，谢谢
- 已采纳 newming 的回答
注意事件绑定的地方有错，mouseover, click 事件都需要委托给子元素 .rating-item
$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)
})
- 2018-03-21 2回答·1702浏览
-
慕用1312185
- 问题已经解决，粗心造成的错误
- 2018-02-24 3回答·1197浏览
-
慕虎0455010
- 关于整个课程的效果显示问题
不是，我的怎么写都没有效果，浏览器按F12显示的错误是$fn is not defined
- 2017-10-28 2回答·1332浏览
-
懒姑娘要学习了
- 为什么鼠标离开后再执行函数LightOn( )呢？
不写鼠标移出事件（mouseout）效果也相似是因为此时的num是个全局变量
- 2017-10-09 2回答·1541浏览
-
慕哥9586403
- 素材在哪里下呢
该课程中没有提供素材下载，不过我在评论中看到有同学提供了一个图片http://i.niupic.com/images/2017/05/31/iVPGGC.png，谢谢这位 懦懦懦米米米鱼 同学吧
- 2017-10-08 1回答·1515浏览
-
qq_猩猩c_0
- 关于function(index)中index的问题
这叫做事件回调,each函数遍历数组,可以得到数组中元素key-value的值,js中普通数组是index-value的设计,而对象则是key-value模式,得到这些数据需要处理，each函数的参数是一个函数，你在each函数执行的时候就像调用参数一样来调用这个函数来处理数据就行了。这只是一种设计思想，js,python都可以实现，java不行，这和语言设计的时候能否把变量传入函数以及能否把函数名当作参数传递有关，也不用去深究
- 2017-10-01 1回答·3205浏览
-
慕丝0963956
- 为什么我不点击，移开鼠标的时候不会回到初始化的状态？？
我写的 可以借鉴下
var num=2;
//li 元素绑定多个事件 按顺序依次触发
$('li').on('click mouseover mouseout',function (e) {
if(e.type=='mouseover'){
var num1=$(this).index()+1;
light(num1);//这里的变量不能是全局变量
}else if (e.type=='click') {
num=$(this).index()+1;
light(num);//这个一定要是全局已经定义的变量
}else if (e.type=='mouseout') {
$('li').css('background-position','0 0')
};//鼠标移开先全部清除
light(num);//再传入已经更新的num值 这样鼠标点击的效果就还在
});
var light=function (num) {
$('li').each(function (index) {
if(index<num){
$(this).css('background-position','0 -68px');
};
})
};
light(num);//先调用一次 放在最后 light函数要先加载
- 2017-09-01 3回答·1884浏览
-
qq_小蚊子_1
- 如何插入星星？
背景图片background url
或者 直接引入img
- 2017-07-10 1回答·1039浏览
-
慕瓜337978
- 星星是怎么显示在浏览器上的
直接给li添加背景图片就可以了呀。。
- 2017-07-09 2回答·1672浏览
