<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #ff3100;
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
var wjx_none = '☆'; // 空心五角星
var wjx_sel = '★'; // 实心五角星
//需求1:鼠标放上去当前的li和之前所有的li内容全部变为实心五角星,移开变为空心。
$(".comment li").on("mouseenter", function () {
//当前五角星,和之前的所有五角星,全部是实心的,其他的为空心
// $(this).text(wjx_sel).prevAll("li").text(wjx_sel);
// $(this).nextAll("li").text(wjx_none);
$(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
});
$(".comment li").on("mouseleave", function () {
//bug:如果没有点击过li,那么会出现无法清除的现象,处理办法就是先判断,看看是否有current类
if($("li.current").length === 0){
$(".comment li").text(wjx_none);
}else{
//当鼠标移开的时候,谁有current类名,那么当前和之前所有的li前部是实心五角星,后面的所有li都是空心
$("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
}
});
//需求2:鼠标点击那个li,当你前li和之前所有的li都变成实心五角星,其他变为空心。
$(".comment li").on("click", function () {
//点击哪个li给他加一个类名。清空其他所有的li的类名
$(this).attr("class","current").siblings("li").removeAttr("class");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
五角星案例
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...