请问这个javascript效果怎么写灵活一点，可以多次使用？

Question

$(function(){
var lis=document.getElementById("a1");
var aImg=lis.getElementsByTagName("img");
var label = lis.getElementsByTagName("label");
var i = iScore = iStar = 0;
for (i=1; i<=aImg.length; i++) {
aImg[i-1].index = i;
aImg[i-1].onmouseover = function() {
Pointer(this.index);
label[0].innerHTML=this.index+"星";
};
aImg[i-1].onmouseout = function() {
Pointer();
};
aImg[i-1].onclick = function() {
iStar = this.index;
label[0].innerHTML=this.index+"星";            
}
}
function Pointer(Score) {
iScore = Score || iStar
for(i=0; i<aImg.length; i++) aImg[i].src = i < iScore ? "images/star_poi_1.gif" : "images/star_wr_2.gif"
}})javascript

Answer 1

笨蛋我的想法function setLabel(){
var lis=document.getElementById("a1");
var aImg=lis.getElementsByTagName("img");
var label = lis.getElementsByTagName("label");
var i = iScore = iStar = 0;
for (i=1; i<=aImg.length; i++) {
aImg[i-1].index = i;
aImg[i-1].onmouseover = function() {
Pointer(this.index);
label[0].innerHTML=this.index+"星";
};
aImg[i-1].onmouseout = function() {
Pointer();
};
aImg[i-1].onclick = function() {
iStar = this.index;
label[0].innerHTML=this.index+"星";            
}
}
function Pointer(Score) {
iScore = Score || iStar
for(i=0; i<aImg.length; i++) aImg[i].src = i < iScore ? "images/star_poi_1.gif" : "images/star_wr_2.gif"
}
setLabel();

Answer 2

<ul>
<li id="a1">口味：<span><img title="1星" src="images/star_wr_2.gif" /><img title="2星" src="images/star_wr_2.gif" /><img title="3星" src="images/star_wr_2.gif" /><img title="4星" src="images/star_wr_2.gif" /><img title="5星" src="images/star_wr_2.gif" /></span> <label></label></li>
<li id="a2">环境：<span><img title="1星" src="images/star_wr_2.gif" /><img title="2星" src="images/star_wr_2.gif" /><img title="3星" src="images/star_wr_2.gif" /><img title="4星" src="images/star_wr_2.gif" /><img title="5星" src="images/star_wr_2.gif" /></span> <label></label></li>
<li id="a3">服务：<span><img title="1星" src="images/star_wr_2.gif" /><img title="2星" src="images/star_wr_2.gif" /><img title="3星" src="images/star_wr_2.gif" /><img title="4星" src="images/star_wr_2.gif" /><img title="5星" src="images/star_wr_2.gif" /></span> <label></label></li>
</ul>我的html是这样的

Answer 3

我这段还有优化的空间，要睡觉了，以后抽时间我再调整。var ul = document.getElementsByTagName('ul')[0],
labelElement,
parentElement,
eventElement,
imgTitle = '',
imgs,
i,
len;
ul.onclick = function (event){
if(Object.prototype.toString.call(event.target) == "[object HTMLImageElement]"){
eventElement = event.target || event.srcElement;
parentElement = eventElement && eventElement.parentElement.parentElement;
labelElement = parentElement && parentElement.getElementsByTagName('label')[0];
labelElement.innerHTML = labelElement ? eventElement.title : ""; // 这个地方我取巧了，直接拿的title的值，根据需求可另调整
}
}; ul.onmouseover = function (event){
if(Object.prototype.toString.call(event.target) == "[object HTMLImageElement]"){
replacePreviousImage(event.target);
}
}; ul.onmouseout = function (event) {
if(Object.prototype.toString.call(event.target) == "[object HTMLImageElement]"){
imgs = event.target.parentElement.children;
for(len = imgs.length , i = len - 1 ; i >= 0 ; i--){
replaceNextImage(imgs[i]);
}
}
} function replacePreviousImage(node){
try{
if(node.nodeName.toLowerCase() == "img"){
node.src = "images/star_poi_1.png";
}
if(node.nodeName.toLowerCase() != "span"){
arguments.callee(node.previousSibling);
}
}catch (e){}
} function replaceNextImage(node){
if(node.nodeName.toLowerCase() == "img"){
node.src = "images/star_wr_2.png";
}
}