五星评分插件

原创已于 2022-02-11 10:02:12 修改 · 698 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery插件 #五星好评

于 2018-09-15 10:20:40 首次发布

web前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个基于HTML、CSS和jQuery的星级评分系统实现方法，通过鼠标悬停和点击操作，可以改变星星图标的状态并记录评分结果。

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

html代码部分:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
		    margin:0;
		    padding:0;
		}
		 
		.box{
		    margin: 20px auto;
		    height: 50px;
		    width: 300px;
		}
		.box .comment{
		    font-size: 30px;
		    color: orange;
		}
		 
		.comment li{
		    float: left;
		    cursor: pointer;
		}
		 
		ul{
		    list-style: none;
		}

	</style>
</head>
<body>
    <div class="box">
        <ul class="comment" name="xingji">
            <li value="1">☆</li>
            <li value="2">☆</li>
            <li value="3">☆</li>
            <li value="4">☆</li>
            <li value="5">☆</li>
        </ul>
    <input type="text" value="" id="aaa">
    </div>
</body>
</html>

使用的时候可以把input换为隐藏域,现在的目的是为了能看到获取的值

引入jquery:

<script src="jquery.min.js"></script>

js代码:

<script>
    $(function(){
        var wjx_none = '☆'; // 空心五角星
        var wjx_sel = '★'; // 实心五角星
 
        //鼠标移进变实星
        $(".comment li").on("mouseover",function(){
            $(this).text(wjx_sel).prevAll("li").
            text(wjx_sel).end().nextAll().text(wjx_none);
        	$("#aaa").val($(this).val());
            
        });
 
        //鼠标移出变空星
        $(".comment li").on("mouseout",function(){
           if($("li.current").length === 0){
                $(".comment li").text(wjx_none);
           }else{
               $("li .current").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
           }
        });
 
        //鼠标点击保持当前状态
        $(".comment li").on("click",function(){
            $(this).attr("class","current").siblings().removeClass("current");
            
        	$("#aaa").val($(this).val());
            // alert($(this).val());
        });
 
 
    });
</script>