【学艺不精系列】简单的 JavaScript 表示星级的页面控件脚本

/// <reference path="jquery-1.4.1.js" />
/// <reference path="jquery-1.4.1-vsdoc.js" />

$().ready(function () {
$("#selStar").css("cursor", "pointer");
$("#selStar").html('<span id="star0">☆</span><span id="star1">☆</span><span id="star2">☆</span><span id="star3">☆</span><span id="star4">☆</span>'
+ '<input type="hidden" name="Importance" id="importance" value="☆☆☆☆☆" />');

var s0 = 0; var s1 = 0; var s2 = 0; var s3 = 0; var s4 = 0;

$("#star0").mouseover(function () { s0 = 1; fnStar(); });
$("#star1").mouseover(function () { s1 = 1; fnStar(); });
$("#star2").mouseover(function () { s2 = 1; fnStar(); });
$("#star3").mouseover(function () { s3 = 1; fnStar(); });
$("#star4").mouseover(function () { s4 = 1; fnStar(); });

$("#star0").mouseout(function () { s0 = 0; fnStar(); });
$("#star1").mouseout(function () { s1 = 0; fnStar(); });
$("#star2").mouseout(function () { s2 = 0; fnStar(); });
$("#star3").mouseout(function () { s3 = 0; fnStar(); });
$("#star4").mouseout(function () { s4 = 0; fnStar(); });

$("#star0").click(fnClick);
$("#star1").click(fnClick);
$("#star2").click(fnClick);
$("#star3").click(fnClick);
$("#star4").click(fnClick);

function fnStar() {
if (s0 + s1 + s2 + s3 + s4 == 0) {
var s = $("#importance").val().split('');
$("#star0").text(s[0]); $("#star1").text(s[1]); $("#star2").text(s[2]); $("#star3").text(s[3]); $("#star4").text(s[4]);
} else {
$("#star0").text("☆");
$("#star1").text("☆");
$("#star2").text("☆");
$("#star3").text("☆");
$("#star4").text("☆");
if (s0 + s1 + s2 + s3 + s4 > 0) { $("#star0").text("★"); }
if (s1 + s2 + s3 + s4 > 0) { $("#star1").text("★"); }
if (s2 + s3 + s4 > 0) { $("#star2").text("★"); }
if (s3 + s4 > 0) { $("#star3").text("★"); }
if (s4 > 0) { $("#star4").text("★"); }
}
}

function fnClick() {
$("#importance").val($("#star0").text() + $("#star1").text() + $("#star2").text() + $("#star3").text() + $("#star4").text());
}
});