实现评分的方法 jquery

最新推荐文章于 2021-03-18 21:15:19 发布

原创最新推荐文章于 2021-03-18 21:15:19 发布 · 834 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web

JQuery基础专栏收录该内容

12 篇文章

订阅专栏

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

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

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;
            });
        })