【JavaScript】实现五星评分控件_javascript 设置难易度五星选中-CSDN博客

本文链接：https://blog.csdn.net/sz15732624895/article/details/79439615

一个小例子，用JS实现五星评分控件。

代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #dv {
            font-size:50px;
            width:250px;
            background-color:yellow;
            cursor:pointer;
        }
    </style>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script>
        $(function () {
            // 为每一个span加一个属性，标记数字
            $("#dv span").each(function (k, v) {
                $(this).attr("jk", k);
            })
			// 当前current，表示当前点击选中的五角星
            var current; 
            $("#dv span").mouseover(function (e) {
                if (current) return; 
				// 如果current里面没有对象就是undefined，就是false
                // 如果有了对象，就是true
                $(this).text("★").prevAll().text("★").end().nextAll().text("☆");
            }).mouseout(function (e) {
                if (current) return;
                $(this).text("☆").siblings().text("☆");
            }).click(function (e) {
                if (current) return;
                current = this;
            });
            $("#btn").click(function () {
                alert($(current).attr("jk"));
            });
        });

    </script>
</head>
<body>
    <div id="dv"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
    <hr />
    <input type="button" name="name" value="点击获得选中第几颗星" id="btn"/>
</body>
</html>

效果：