选星星打分功能函数
看了下传统的方法,觉得不好,太麻烦。自己重写了个,思路比较新。//====================选星星打分功能================= function rate(obj,oEvent){//==================// 图片地址设置//==================var imgSrc = 'http://image1.koubei.com/images/store/icon_star_1.gif';var imgSrc_2 = 'http://image1.koubei.com/images/store/icon_star_2.gif';//---------------------------------------if(obj.rateFlag) return;var e = oEvent || window.event;var target = e.target || e.srcElement; var imgArray = obj.getElementsByTagName("img");for(var i=0;iimgArray._num = i;imgArray.onclick=function(){if(obj.rateFlag) return;obj.rateFlag=true;alert(this._num+1);};}if(target.tagName=="IMG"){for(var j=0;jif(jimgArray[j].src=imgSrc_2;} else {imgArray[j].src=imgSrc;}}} else {for(var k=0;kimgArray[k].src=imgSrc;}}}函数有两个参数,功能如下:
obj:img标签组的父容器,类型为DOM对象;
oEvent: event对象。
用到的图片:
[url=http://onlyaa.com/uploads/userup/1/10E123116000004V1.gif][/url]
[url=http://onlyaa.com/uploads/userup/1/10E123116000003142.gif][/url]
这个函数的优点是html代码可以很简洁,使用图片也可以很少,只需要两张图片。事件句柄只需要写在img的父容器上即可。演示用的图片我用的是绝对地址,各位在使用的时候改成网站的相对地址就可以了。当我们点击的时候,我用的是个alert事件。事实上,我们会在这个地方用个ajax方法,把相关的参数传到服务器端。只要把alert(this._num+1)写成sendAjax(this._num+1)就可以了。阿当制作.starWrapper{border:1px solid #FFCC00;padding:5px;width:70px;}.starWrapper img{cursor:pointer;}function rate(obj,oEvent){//==================// 图片地址设置//==================var imgSrc = 'http://onlyaa.com/uploads/userup/1/10E123116000003142.gif';var imgSrc_2 = 'http://onlyaa.com/uploads/userup/1/10E123116000004V1.gif';//---------------------------------------if(obj.rateFlag) return;var e = oEvent || window.event;var target = e.target || e.srcElement;var imgArray = obj.getElementsByTagName("img");for(var i=0;iimgArray._num = i;imgArray.onclick=function(){if(obj.rateFlag) return;obj.rateFlag=true;alert(this._num+1);};}if(target.tagName=="IMG"){for(var j=0;jif(jimgArray[j].src=imgSrc_2;} else {imgArray[j].src=imgSrc;}}} else {for(var k=0;kimgArray[k].src=imgSrc;}}}