试玩（淘宝案例在下面）：
效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.3.1.min.js"></script> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; /*去除文字字符的间距的三种方法*/ /*父盒子字号为0*/ /*font-size: 0;*/ /*设置字符间距为0*/ /*letter-spacing: 0;*/ /*设置文字间距为0*/ /*word-spacing: 0;*/ } li{ color: red; float: left; /*如果把他换成display: inline-block;两个li之间就会有空格，想要去除参照ul写的方法*/ font-size: 40px; font-weight: bold; cursor: pointer; } </style> <script> $(function () { var wjx_none="☆",wjx_sel="★"; $(".comment li").mouseenter(function () { //prevAll()是前面的所有兄弟结点，nextAll()是后面的所有兄弟结点。 // $(this).text(wjx_sel).prevAll().text(wjx_sel); // $(this).nextAll().text(wjx_none); //当执行jQuery时，上面那种方法链式编程就断掉了，如果直接在第一句后面直接加 // .nextAll().text(wjx_none)，作用的就是前面所有的兄弟结点了，下面这种方法就可以解决； //end()方法就是结束当前链式编程回到最初结点$(this) $(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none); }).click(function () { //记录用户点击的哪个五角星，给该五角星添加一个样式类 $(this).addClass("clicked").siblings().removeClass(); }).mouseleave(function () { //判断离开的时候是否点击，如果没有点击，全部星星也为空心，如果点击了才会产生点击的效果 $(".comment li").text(wjx_none); //上一句涉及了隐式迭代，给所有的li标签都添加了文本，它返回的是一个数组，js若要实现这个效果就得实现循环遍历 //如果是$(".comment li").text()默认返回第一个元素的值 $(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none); }) }) </script> </head> <body> <div> <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div> </body> </html>
仿淘宝五角星案例：
效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.3.1.min.js"></script> <style> *{ margin: 0; padding: 0; } div{ width: 120px; height: 20px; margin: 300px auto; border: 1px solid red; padding: 10px; } img{ display: inline-block; cursor: pointer; } </style> <script> $(function () { $(".comment img").mouseenter(function () { if($(this).index()<=1){ $(this).attr("src","star3.png").prevAll().attr("src","star3.png").end().nextAll().attr("src","star1.png"); }else{ $(this).attr("src","star2.png").prevAll().attr("src","star2.png").end().nextAll().attr("src","star1.png"); } }).click(function () { $(this).addClass("clicked").siblings().removeClass(); $(".clicked").prevAll().attr("src",$(this).attr("src")).end().nextAll().attr("src","star1.png"); }).mouseleave(function () { //判断一个标签类是否含有某个class： //1.使用$('div').is('.redColor')方法 //2.使用$('div').hasClass('redColor')方法 (注意jquery的低版本可能是hasClass(‘.classname’)) if($(".comment img").hasClass("clicked")){ $("img.clicked").prevAll().attr("src",$("img.clicked").attr("src")).end().nextAll().attr("src","star1.png"); }else{ $(".comment img").attr("src","star1.png"); } }) }) </script> </head> <body> <div> <span class="comment"> <img src="star1.png" alt=""/> <img src="star1.png" alt=""/> <img src="star1.png" alt=""/> <img src="star1.png" alt=""/> <img src="star1.png" alt=""/> </span> </div> </body> </html>
star1：
star2:
star3: