这是个星级评分,搞不懂是怎么选中当前和前面的星星的,求大佬讲解下
百度文库评分
html,body,p {margin: 0;padding: 0; }
p {border: 1px solid #eee;width: 400px;margin: 50px auto;text-align: center;padding: 10px 0;}
#comment {color: gray;margin-left: 7px;}
#rating {font-size: 0;}
#rating a {margin: 0 1px;}
<script>
window.onload = function () {
var oRating = document.getElementById('rating'), //获取id为rating的span
aA = oRating.getElementsByTagName('a'), //获取span中的a
oComment = document.getElementById('comment'), //获取id为comment的span
arrImg = ['img/nst.gif', 'img/nsg.gif', 'img/sth.gif', 'img/st.gif'], //获取星星图片数组
lastArrImg = [], //获取空数组
lastComment = ' ', //获取空字符
num = 0;
function rating(index, imgSrc) { //index数量 imgSrc图片
for (var i = 0; i |
免责声明:本内容仅代表回答会员见解不代表天盟观点,请谨慎对待。
版权声明:作者保留权利,不代表天盟立场。
|
|
|
|
没有看代码,只是说一下我的思路,可能会和代码里一样,便于你理解。
你hover或click一个星星元素时,获取到当前元素在父元素中的index,这个不难吧。
然后先让所有星星元素都没有星星,然后再遍历父元素中0到index的子元素,设置它们的background-image或内部的img元素等等方法很多,让它们出现星星。
这个是星星都是整数的情况,如果有那种细分到半颗星的情况,那就无非多了一倍子元素,每个星星分成一半去写,道理还是一样的。 |
|
|
|
|