使用Jquery实现一个简单的星级评分效果

本文中我们会通过html+css+jquery实现一个简单的星级评分效果。

当用户鼠标移上去时，星星会随之变色。用户点击之后星星会改变颜色以显示评分。

HTML配置

<div class="box">
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
</div>

 我们通过一个Box盒子来把一组星星包裹起来，再在盒子里面添加一些星星样式。

CSS配置

  <style>
        .box {
            width: 200px;
            margin: 0 auto;
            font-size: 30px;
        }
  </style>

我们再随便给这个盒子一点样式。

Jquery配置

      var index = -1; // 定义一个变量index，初始值为-1，用于存储点击的span元素的索引
        $(".box span").on({
            mousemove: function () {
                // 当鼠标在span元素上移动时，将当前span及其之前的所有span元素的文字颜色设置为红色，之后的所有span元素的文字颜色恢复默认
                var $this = $(this);
                $this.css("color", "red").prevAll().css("color", "red");
                $this.nextAll().css("color", "");
            },
            click: function () {
                // 当点击span元素时，获取该元素的索引并存储在index变量中，同时在控制台输出该索引
                index = $(this).index();
                console.log(index);
            },
            mouseout: function () {
                // 当鼠标从span元素上移出时，如果index为-1，则将所有span元素的文字颜色恢复默认；否则，将索引为index的span元素及其之前的所有span元素的文字颜色设置为红色，之后的所有span元素的文字颜色恢复默认
                if (index == -1) {
                    $(".box span").css("color", "");
                } else {
                    var $target = $(".box span").eq(index);
                    $target.css("color", "red").prevAll().css("color", "red");
                    $target.nextAll().css("color", "");
                }
            }
        });
    </script>

这部分代码使用jQuery监听了.box span元素的三个事件：mousemove、click和mouseout。

• mousemove事件：当鼠标在一个星星图标上移动时，该星星图标及其之前的所有星星图标的文字颜色会被设置为红色，而其后的所有星星图标的文字颜色会恢复默认。
• click事件：当点击一个星星图标时，该星星图标的索引会被获取并存储在index变量中，同时在控制台输出该索引。
• mouseout事件：当鼠标从一个星星图标上移出时，如果index为-1（即没有点击过任何星星图标），则所有星星图标的文字颜色会恢复默认；否则，索引为index的星星图标及其之前的所有星星图标的文字颜色会被设置为红色，其后的所有星星图标的文字颜色会恢复默认。

通过这些事件处理，用户可以通过鼠标操作来动态改变星星图标的颜色，模拟评分或选择功能。