jQuery实现简单星级评分效果
2017-08-21 本文已影响302人
幻凌风
星级评分.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="script/jquery-3.2.1.js"></script>
<script>
$(function () {
var starGray = "images/StarGray.png";
var starYellow = "images/StarYellow.png";
var index;
//合成事件鼠标指向和移开
$("img").hover(function () {
//鼠标指向的时候：
//（1）让当前及之前的图片变成黄色
//（2）之后的灰色图片不变
$(this).attr("src", starYellow).prevAll().attr("src", starYellow).end().nextAll().attr("src", starGray);
}, function () {
//移开的时候分两种情况：
//（1）指向后直接移开——>所有图片置灰色
//（2）点击后移开——>当前及之前图片置成黄色
$("img").attr("src", starGray);
$("img:lt("+index+")").attr("src", starYellow);
});
//鼠标单击事件
$("img").click(function () {
//鼠标单击的时候：
//（1）让当前及之前的图片变成黄色
//（2）之后的灰色图片不变
$(this).attr("src", starYellow);
//因为上面的":lt选择器"是只选择当前之前的元素，为了包含当前元素，故需要+1
index =parseInt( $(this).attr("id"))+1;
})
});
</script>
</head>
<body>
</body>
</html>
