基于jquery的五星好评效果

效果图

<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>

css

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

jquery

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


 });

• 点赞 1
• 收藏
• 分享
• • 文章举报

Dr_W 发布了165 篇原创文章 · 获赞 51 · 访问量 6824 私信 关注

标签：jquery,五星,五角星,text,comment,li,好评,wjx,sel
来源： https://blog.csdn.net/qq_42363032/article/details/103933369