实现评分的方法 jquery

jQuery评分星星效果实现

最新推荐文章于 2024-11-28 12:23:16 发布

原创最新推荐文章于 2024-11-28 12:23:16 发布 · 843 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web

JQuery基础专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的动态评分系统。该系统通过鼠标悬停改变星星图标的状态来直观展示评分等级，并且能够记录用户的点击选择。文章详细解释了jQuery代码的逻辑，包括如何响应鼠标悬停、离开及点击事件。

ody>
    <p id="pscore">
    </p>
    <table id="t1" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
        </tr>
    </table>

</body>

jquery代码:

    //为每一个td注册一个mouseover事件
        $(function () {
            $('#t1 td').mouseover(function () {
                $(this).text('★').prevAll().text('★').end().nextAll().text('☆');
            }).mouseout(function () {
                //当鼠标离开时把所有的td都变成☆,把具有isclicked属性的td以及之前的td,变成★
                $('t1 td').text('☆');
                $('#t1 td[isclicked=isclicked]').text('★').prevAll().text('★');
            }).click(function () {
                //点击时给当前的td增加isclicked属性
                $(this).attr('isclicked', 'isclicked').siblings().removeAttr('isclicked');
                //点击某个td时显示分数
                $('#pscore').text($(this).attr('score'));
                }).attr('score', function (index) {
                    return (index + 1) * 10;
            });
        })