日期:2014-05-16  浏览次数:20403 次

javascript--枚举算法实现

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        //枚举算法--》穷举算法
        window.onload=function  () {
            var aA=document.getElementsByTagName('a');//get A
            var oUl=document.getElementById('uli');//get ul
            var aLi=document.getElementsByTagName('li');//get li

            for (var i = 0; i < aA.length; i++) {//给A添加点击事件
                aA[i].onclick=function  () {//给每个里添加点击事件
                    if(mj(this.innerHTML)){//没有相同的
                        var oLi=document.createElement('li');
                        oLi.innerHTML=this.innerHTML;
                        if(aLi[0]){
                            oUl.appendChild(oLi);//第一次显
                        }else{
                            oUl.insertBefore(oLi, aLi[0])//只要点击即显示在最前面
                        }
                        
                    }else{//有相同的,不再显示
                        mj2(this.innerHTML);
                    }
                };
            };
            function mj (text) {//判断是否存在相通的Li
                var result=true;
                for (var i = 0; i < aLi.length; i++) {
                    if(aLi[i].innerHTML==text){
                        result=false;
                    }
                };

                return result;
            }

            function mj2 (text) {//存在相同的li时,将当前的Li添加在第一个位置!
                for (var i = 0; i < aLi.length; i++) {
                    if(aLi[i].innerHTML==text){
                        oUl.insertBefore(aLi[i], aLi[0])
                    }
                };

            
            }
        }
    </script>
</head>
<body>
    <a href="javascript:;">北京</a>
    <a href="javascript:;">上海</a>
    <a href="javascript:;">杭州</a>
    <a href="javascript:;">天津</a>
    <a href="javascript:;">武汉</a>
    <a href="javascript:;">长沙</a>
    <a href="javascript:;">广州</a>
    <a href="javascript:;">神州</a>
    
    <ul id="uli">    
    </ul>

</body>
</html>

1、点击其中一个,显示在最前面!

2、当点击第二次的时候,不再显示!!