首页 > 代码库 > javascript--枚举算法实现

javascript--枚举算法实现

2024-09-14 07:03:13   215人阅读

<!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、当点击第二次的时候。不再显示！！

技术分享



javascript--枚举算法实现


联系
我们