html部分:
<div id="vote">
<div >☆</div>
<div >☆</div>
<div >☆</div>
<div >☆</div>
<div >☆</div>
</div>
主要思路:
1先vote的子元素拎出来,但是这样会取出所有的子函数,于是需要一个if语句来过滤掉其他不需要的元素
2给子元素标上序号
3 检测被点击的子元素,将前面的星星变成空心
具体函数如下:
vote=function (e) { var test=e.childNodes; var l=test.length; var notes; var j=0; var vote=[]; for (var i=0;i<l;i++){ if(test[i].nodeName.replace("#", "").toLocaleLowerCase() ==="div") { vote[j]=test[i]; j++; } } l=vote.length; for( i=0;i<l;i++) { var m=vote[i]; m.setAttribute("data_num",i); m.onclick=function () { var i=this.getAttribute("data_num"); alert(i); for (var k=0;k<=i;k++){ vote[k].innerHTML="★"; } } } }未点击之前,星星是空心,点击之后星星和前面的星星会变成实心