标题01、初级版本五星评价
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<script>
$("body").append(createStar());
function createStar(){
var div=$("<div></div>").data("index",-1).width(70).height(14).css({
float:"left"
});
for(var i=0;i<5;i++){
$("<div></div>").appendTo(div)
.css({
width:14,
height:14,
float:"left",
backgroundImage:"url(./img/commstar02.png)",
backgroundPositionY:-14
}).hover(function(e){
var index0=div.data("index");
var index1=Array.from(div.children()).indexOf(this);
if(index1<index0) return;
$(this).css({
backgroundPositionY:0
}).prevAll().css({
backgroundPositionY:0
});
$(this).nextAll().css({
backgroundPositionY:-14
})
},function(){
var index=div.data("index");
if(index===-1){
div.children().css({
backgroundPositionY:-14
})
}else{
div.children().slice(0,index).css({
backgroundPositionY:0
});
div.children().slice(index+1).css({
backgroundPositionY:-14
})
}
}).click(function(e){
var index=Array.from(div.children()).indexOf(this);
div.data("index",index);
div.children().slice(0,index).css({
backgroundPositionY:0
});
div.children().slice(index+1).css({
backgroundPositionY:-14
})
})
}
return div;
}
</script>
</body>
</html>
标题1、星星案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<script>
createStar().appendTo("body");
createStar().appendTo("body");
createStar().appendTo("body");
function createStar() {
// 创建父容器
var star=$("<div></div>")
.width(70).height(14).mouseleave(function () {
// 选择当前容器中所有小星星从当前选中位置开始向后的所有项,
// 修改它的背景不被点亮
$(this).children().slice(star.num+1)
.each(function (index,item) {
if(item.bool) return;
$(item).css("backgroundPositionY",-14)
})
});
// 当前选中第几个
star.num=0;
// 循环5次创建小星星
for(var i=0;i<5;i++){
// 如果当前是第0个,我们需要选中它
createAloneStar(star,i===0);
}
return star;
}
// 创建小星星
function createAloneStar(parent,checked) {
var span=$("<span></span>").width(14)
.height(14).appendTo(parent)
.css({
display:"inline-block",
"backgroundImage":"url('img/commstar02.png')",
backgroundPositionY:checked ? 0 : -14
}).hover(function () {
// 如果当前的小星星被标记不可以改变时,跳出
if(this.bool) return;
// 可以改变时,修改当前这个小星星的背景位置和它前面所有兄弟星星的背景位置
$(this).css("backgroundPositionY",0)
.prevAll().css("backgroundPositionY",0)
},function () {
if(this.bool) return;
// 鼠标离开时,修改当前小星星的背景不点亮
$(this).css("backgroundPositionY",-14)
}).click(function () {
// 当点击当前小星星时,获取当前元素的所有兄弟,包括自己的数组
var arr=Array.from(this.parentElement.children);
// 查找当前是第几位,并且将这个第几位存储在父容器的num属性中
parent.num=arr.indexOf(this);
// 并且设置当前小星星不能再被hover影响
this.bool=true;
// 遍历上一级所有的兄弟,并且都设置为不可被hover影响
$(this).prevAll().each(function (index,item) {
item.bool=true;
});
// 修改所有下一级兄弟都不被点亮,并且将所有下一级兄弟的bool设置false,可以被hover影响
$(this).nextAll().css("backgroundPositionY",-14)
.each(function (index,item) {
item.bool=false;
})
});
if(checked){
span[0].bool=true;
}
}
</script>
</body>
</html>