写一个简单的五星评分系统

前言

最近在写期末的课程设计，网站有要求写一个五星评分的功能，我按照我的思路写了一下，经过一下午的时间，把这个功能实现的比较完善了。

一开始的第一种尝试

放代码：
HTML部分：

*{
    list-style: none;
}
.all{
    display: flex;

}
</style>
<body>
    <ul class="all">
        <li><img index=0 src="./images/wxz.png" alt=""></li>
        <li><img index=1 src="./images/wxz.png" alt=""></li>
        <li><img index=2 src="./images/wxz.png" alt=""></li>
        <li><img index=3 src="./images/wxz.png" alt=""></li>
        <li><img index=4 src="./images/wxz.png" alt=""></li>
    </ul>
</body>

JS部分：

<script>
    $(function(){
        var $stars=$('img');
        console.log($stars);
        // 最外面的循环是给所有img添加事件
        for(var i=0;i<$stars.length;i++){
            $stars.eq(i).mouseenter(function(){
                // 第二层的循环是判断是否是当前正在操作的元素
                for(var i=0;i<$stars.length;i++){
                    if($stars[i]==this){
                        $(this).click(function(){
                            console.log(i);                           
                        })
                        // 第三层的循环是给所有的星星设置相应的图片,让它显示出应有的效果
                        for(var j=0;j<$stars.length;j++){
                            if(j<=i){
                                $stars.eq(j).attr("src","./images/xz.png")
                            }
                            else{
                                $stars.eq(j).attr("src","./images/wxz.png")
                            }
                        }
                    }
                }
            })
        }
    })
    </script>

最终是实现了效果,但是我觉得这不是最好最简单的写法,于是我将其改进了一下，有了下面的这种写法。

第二种写法

第二种写法原理其实也是一样的，只不过是代码更加的简介和简单

<style>
*{
    list-style: none;
}
.all{
    display: flex;
}
</style>
<body>
    <ul class="all">
        <li><img index="0" src="./images/wxz.png" alt=""></li>
        <li><img index="1" src="./images/wxz.png" alt=""></li>
        <li><img index="2" src="./images/wxz.png" alt=""></li>
        <li><img index="3" src="./images/wxz.png" alt=""></li>
        <li><img index="4" src="./images/wxz.png" alt=""></li>
    </ul>
</body>

<script>
    $(function(){
        var $stars=$('img');//获取所有的星星
        // 鼠标移入事件
        $stars.mouseenter(function(){
            var $star_index=parseInt($(this).attr("index"));
            for(var i=0;i<$stars.length;i++){
                if(i<=$star_index){
                    $stars.eq(i).attr("src","./images/xz.png");
                }
                else{
                    $stars.eq(i).attr("src","./images/wxz.png");
                }
            }            
        })
        // 单击事件，向服务器提交数据
        $stars.click(function(){
            var $star_index=parseInt($(this).attr("index"));
            console.log($star_index+1);  
        })
    })
    </script>

可以看出第二种写法要简单很多，主要是没有这么多的循环嵌套，这也是我最终所采用的写法。

总结

虽然这个评分系统的原理以及思路是挺简单的，但其实在实现的过程中还是遇到了一些困难的，不过经过不断的思考排错，最终还是将其完善了，相信只要不断的学习，以后一定能越来越得心应手。