五星好评案例（原创）

Html

Css

 * {
	padding:0;
	margin:0;
}
.comment {
	font-size:40px;
	color:#ff3100;
}
.comment li {
	float:left;
	cursor:pointer;
}
ul {
	list-style:none;
}

$(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");
     });

});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

五星好评案例（原创）

代码描述：jQuery星星评分

这个可有用了

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

西风.

相关代码