用javascript模拟星星投票

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="★";
            }
        }
    }
}

未点击之前,星星是空心,点击之后星星和前面的星星会变成实心