星级评分系统

最新推荐文章于 2021-02-12 13:06:56 发布

原创最新推荐文章于 2021-02-12 13:06:56 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS星级评分系统

JS 常用知识专栏收录该内容

54 篇文章

订阅专栏

本文介绍了一个基于jQuery的星级评分系统实现方案，该系统通过鼠标悬停和点击事件动态显示不同评分等级的文字描述，增强了用户体验。

$(function () {
var aA = $("a");
var timer;
var iStar = -1;
var unitil = [{
score: "1分",
impress: "很不满意",
notice: "差得太离谱，与卖家描述的严重不符，非常不满"
},
{
score: "2分",
impress: "不满意",
notice: "部分有破损，与卖家描述的不符，不满意"
},
{
score: "3分",
impress: "一般",
notice: "质量一般，没有卖家描述的那么好"
},
{
score: "4分",
impress: "满意",
notice: "质量不错，与卖家描述的基本一致，还是挺满意的"
},
{
score: "5分",
impress: "非常满意",
notice: "质量非常好，与卖家描述的完全一致，非常满意"
}
];

aA.each(function (i) {
$(this).mouseover(function () {
clearTimeout(timer);
point(i);
$("#box").show();
$("#box").css("left",87+26*i);
$("#box span").eq(0).html(unitil[i].score);
$("#box span").eq(1).html(unitil[i].impress);
$("#box h2").html(unitil[i].notice);
});
$(this).click(function () {
point(i);
iStar = i;
$("#box").hide();
$("#appraise").show();
$("#appraise b").html(unitil[i].score);
$("#appraise span").html("("+unitil[i].notice+")");
});
});

aA.mouseout(function () {
timer = setTimeout(function () {
point(iStar);
$("#box").hide();
}, 200);
});

function point(num) {
aA.css("background-position", "");
for (var j = 0; j <= num; j++) {
$(aA[j]).css("background-position", "0");
};
};

});

</script>

<body>
<div id="warp">
<p>点击星星就能打分</p>
<p>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</p>
<div id="box">
<em></em>
<span>1分</span><span>很不满意</span>
<h2>差得太离谱，与卖家描述的严重不符，非常不满</h2>
</div>
<p id="appraise"><b>3分</b><span>(质量一般，没有卖家描述的那么好)</span></p>
</div>
</body>