jQuery实战_防淘宝评论五角星

我就是我 2022-05-21 00:08 204阅读 0赞

淘宝评论的小星星，移上去可以星星变成实心的，完全防淘宝来实现一个五角星的例子  
思路：

第一步：当鼠标移到某个li标签上，该li以及它前面的li变成实心的，后面的不变

第二部：记录一下用户点击的是哪一个五角星，给点击的li标签再添加一个样式类

第三部：当鼠标移开评分控件的时候，如果没有clicked,即没有点击任何星星，在离开的时候所有的星星变为空心

如果有clicked,把clicked（包括自己）之前的五角星全部变成实心的，后面的变成空心  
html:

JS:

$(document).ready(function(){ 
            //第一步：当鼠标移到某个li标签上，该li以及它前面的li变成实心的，后面的不变
            //当执行的jQuery链式编程断掉的时候，如果能把链在链上就好了
            //.end() 结束当前的链式编程的链，回到最原始的链上去
                var  wjx_shi ='★',
                     wjx_none ='☆';
           $('ul').on('mouseenter','li',function () { 
               //$(this)指的是li
               $(this).text(wjx_shi)
                       .prevAll()
                       .text(wjx_shi)
                       .end()
                       .nextAll()
                       .text(wjx_none);
    
                //第二部：记录一下用户点击的是哪一个五角星，给点击的li标签再添加一个样式类
           }).on('click','li',function () { 
               $(this).addClass('clicked').siblings().removeClass('clicked');
               //第三部：当鼠标移开评分控件的时候，如果没有clicked,即没有点击任何星星，在离开的时候所有的星星变为空心
               // 把clicked（包括自己）之前的五角星全部变成实心的，后面的变成空心
           }).on('mouseleave',function () { 
               $(this).children().text(wjx_none);
               $('.clicked').text(wjx_shi).prevAll().text(wjx_shi).end().nextAll().text(wjx_none);
           })
        })

效果：移上去的时候星星变为实心的，离开的话会保留星星的状态。  
![这里写图片描述][70]  
注意：给点击元素设置clicked类的时候，要将其兄弟元素的clicked的类去掉，只能有一个clicked的li.

[70]: /images/20220521/0dcedcfba4c4430a95480543e750d965.png