本文中我们会通过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
的星星图标及其之前的所有星星图标的文字颜色会被设置为红色,其后的所有星星图标的文字颜色会恢复默认。
通过这些事件处理,用户可以通过鼠标操作来动态改变星星图标的颜色,模拟评分或选择功能。