实现评价页面添加星星数量

最新推荐文章于 2023-10-06 21:04:40 发布

weixin_30315905

最新推荐文章于 2023-10-06 21:04:40 发布

阅读量355

点赞数

原文链接：http://www.cnblogs.com/ouchen0312/p/7568448.html

版权

本文介绍了一个基于JavaScript的星级评价交互实现方案，通过自定义函数fnShow控制星星的点亮状态，并利用onmouseover、onmouseout和onclick事件实现鼠标悬停、离开及点击时星星状态的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var num = finalnum = tempnum = 0;
        var lis = $(".star-box span");
        //num:传入点亮星星的个数
        //finalnum:最终点亮星星的个数
        //tempnum:一个中间值
        function fnShow(num) {
            finalnum = num || tempnum; //如果传入的num为0，则finalnum取tempnum的值
            for(var i = 0; i < lis.length; i++) {
                lis[i].className = i < finalnum ? "active" : ""; //点亮星星就是加class为light的样式
            }
        }
        for(var i = 1; i <= lis.length; i++) {
            lis[i - 1].index = i;
            lis[i - 1].onmouseover = function() { //鼠标经过点亮星星。
                fnShow(this.index); //传入的值为正，就是finalnum
            }
            lis[i - 1].onmouseout = function() { //鼠标离开时星星变暗
                fnShow(0); //传入值为0，finalnum为tempnum,初始为0
            }
            lis[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星
                tempnum = this.index;
            }
        }

                            <div class="top">
                    <span class="title">满意度：</span>
                    <div class="star-box clearfix">
                        <span class="active"></span>
                        <span class="active"></span>
                        <span class="active"></span>
                        <span class="active"></span>
                        <span class="active"></span>
                    </div>
                </div>