JQuery版评分控件

2023-02-06 07:29:55

Hi All,

分享一个学习JQuery做的一个评分控件。

需求：当鼠标移动到 ‘☆’ 上时，该字符左边的 ‘☆’ 变成 '★'，该字符右边仍然是 ‘☆’，并显示相应星星数的评价结果；当鼠标推出 ‘☆’时，所以字符为 ‘☆’，并清空评价结果。

注：一个 '★' 为：差

　　二个 '★' 为：一般

　　三个 '★' 为：良好

　　四个 '★' 为：满意

　　五个 '★' 为：很满意

1. 用HTML画好布局：

<div class="myPosition">
        <h2>评分：</h2>
        <table class="myFont">
            <tr id="tr_mark">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div class="myComment">
        <span id="myComment">一般</span>
    </div>

2. 用CSS控制表现形式：

.myPosition { position:absolute; top:35%; left:20%; }

.myFont { font-size: 24px; }

.myComment { color: red; font-weight:bold; font-size: 20px; position:absolute; top: 44%; left:30%; }

3. 用JQuery控制行为

<script src="../Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $tds = $("#tr_mark > td"); // 获取所有的td
            $tds.text("☆"); // 设置td的innerText
            $tds.mousemove(function () { // 给所有的td注册mouseove事件
                $tds.text("★");
                $(this).nextAll().text("☆");
                var td = $(this).get(0);
                var index = td.cellIndex;
                switch (index)
                {
                    case 0:
                        $("#myComment").text("差");
                        break;
                    case 1:
                        $("#myComment").text("一般");
                        break;
                    case 2:
                        $("#myComment").text("良好");
                        break;
                    case 3:
                        $("#myComment").text("满意");
                        break;
                    case 4:
                        $("#myComment").text("很满意");
                        break;
                }
            }).mouseout(function () { // 给所有的td注册mouseout事件
                $tds.text("☆"); // 将所有td内容变成空 ☆
                $("#myComment").text(""); // 将评价结果内容清空
            });
        });
    </script>

4. 显示结果：

这样一个简单的淘宝评分控件就完成了，大家可以尝试一下 :).