jQuery五角星评分

所属分类:输入-投票率

 33248  303  查看评论 (7)
分享到微信朋友圈
X
jQuery五角星评分 ie兼容6

1. 给所有的li注册mouseenter事件

2. 让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心

3. 离开ul的时候,把所有的li变成空心

$(function () {
            var wjx_s = "★";
            var wjx_k = "☆";
            //1. 给所有的li注册mouseenter事件
            $(".comment li").mouseenter(function () {
                //2. 让当前li和前面所有的li变成实心,让后面所有的兄弟变成空心
                //前面兄弟:prevAll():
                //后面兄弟:nextAll():
                $(this).text(wjx_s).prevAll().text(wjx_s);
                $(this).nextAll(wjx_k);
            });
            //2. 离开ul的时候,把所有的li变成空心
            $(".comment").mouseleave(function () {
                $(this).children().text(wjx_k);
                //如果我知道了我刚刚点了那个五角星
                //可以让点的那个五角星以及前面的兄弟变成实心就可以。
                //4. 找到我点击的那个li
                $("li.current").text(wjx_s).prevAll().text(wjx_s)
            });
            //3. 给所有的li注册点击事件,点击的时候,留下点东西(class)
            $(".comment li").click(function () {
                $(this).addClass("current").siblings().removeClass("current")
            })
        })

4. 给所有的li注册点击事件,点击的时候,留下点东西(class)

相关插件-投票率

jQuery实现淘宝打星评价

jQuery实现淘宝打星评价直接引用即可
  投票率
 38644  347

jquery星级评分

一款使用简便、满足多种需求的星际评分插件
  投票率
 23996  317

jQuery星星评分插件jquery.raty.js

jQuery滑动星星评分效果,代码注释全。
  投票率
 26076  319

多种CSS3动画效果星级评分特效

css3动画实现效果星级评分
  投票率
 42868  449

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ―ㄋ才过1/3人生?の 0
    2019/8/4 10:32:01
    有半颗心就好了 回复
    英宇 0
    2018/5/3 15:59:06
    说实话,还有进步空间 回复
    南方装修 0
    2017/12/21 19:38:41
    半醒狐狸 0
    2017/11/23 14:39:25

    当鼠标选取某个星后,只能向前选取不能向后了

    回复
    ┽牵手 ぅ阿狸 0
    2017/10/18 15:46:18

    鼠标经过只能增加不能消失,没有写这个,感觉有点小瑕疵。

    回复
    花花世界 0
    2017/1/23 9:33:32
    没半颗星
        杨小爷0
        2017/1/23 17:59:28

        他是用字符完成的。。半颗星肯定不行了

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复