jQuery五角星评分

原文链接
1. 给所有的li注册mouseenter事件

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

  2. 离开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")
            })
        })
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML代码: ```html <div class="star-rating"> <span class="fa fa-star-o" data-rating="1"></span> <span class="fa fa-star-o" data-rating="2"></span> <span class="fa fa-star-o" data-rating="3"></span> <span class="fa fa-star-o" data-rating="4"></span> <span class="fa fa-star-o" data-rating="5"></span> <input type="hidden" name="rating" class="rating-value" value="0"> </div> ``` jQuery代码: ```javascript $(document).ready(function(){ $('.star-rating .fa').on('click', function(){ var rating = $(this).data('rating'); $(this).closest('.star-rating').find('.fa').removeClass('fa-star').addClass('fa-star-o'); $(this).prevAll('.fa').removeClass('fa-star-o').addClass('fa-star'); $(this).removeClass('fa-star-o').addClass('fa-star'); $(this).closest('.star-rating').find('.rating-value').val(rating); }); $('.star-rating .fa').on('mouseover', function(){ var rating = $(this).data('rating'); $(this).closest('.star-rating').find('.fa').removeClass('fa-star').addClass('fa-star-o'); $(this).prevAll('.fa').removeClass('fa-star-o').addClass('fa-star'); $(this).removeClass('fa-star-o').addClass('fa-star'); $(this).closest('.star-rating').find('.rating-value').val(rating); }); $('.star-rating').on('mouseout', function(){ var rating = $(this).find('.rating-value').val(); $(this).closest('.star-rating').find('.fa').removeClass('fa-star').addClass('fa-star-o'); $(this).find('.fa').each(function(index){ if (index < rating) { $(this).removeClass('fa-star-o').addClass('fa-star'); } else { $(this).removeClass('fa-star').addClass('fa-star-o'); } }); }); }); ``` 这段代码实现了一个五角星评分的功能,用户可以通过鼠标点击或鼠标滑过来选择评分,最终评分的值会保存在一个隐藏的input元素中,可以提交到后台进行处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值