枚举算法:不重复选取

来源:互联网 发布:百度贴吧查ip软件 编辑:程序博客网 时间:2024/06/13 18:55
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>枚举算法:不重复选择</title>    <script>        window.onload = function () {            /*            * 问题描述:            * 从城市列表中选择城市,然后显示出来            * 要求:            * 1.没有选择过的城市,添加到选择栏中去            * 2.选择过的城市,应该放在选择栏最前面            * */            var aA = document.getElementsByTagName('a');            var oUl = document.getElementById('list');            var aLi = oUl.getElementsByTagName('li');            // 遍历城市列表            for ( var i = 0; i < aA.length; i++ ) {                // 为点击选择每个城市添加事件                aA[i].onclick = (function (i) {                    return function () {                        var selectCity = aA[i].innerHTML;                        // 判断选择已选择城市列表中是否有值                        var oLi = document.createElement('li');                        oLi.innerHTML = selectCity;                        var selectedCities = aLi.length;                        if (selectedCities === 0) {                            // 没有,添加                            oUl.appendChild(oLi);                        } else {                            // 有,遍历已选择城市列表                            for ( var j = 0; j < selectedCities; j++ ) {                                // 没有,放入尾部;有,放在头部                                if ( aLi[j].innerHTML === selectCity) {                                    oUl.removeChild(aLi[j]);                                    oUl.insertBefore(oLi, aLi[0]);                                    // 必须结束,不然新添加的会在后来的for循环中处乱                                    break;                                } else {                                    oUl.appendChild(oLi);                                }                                /*(function (j) {                                    return function () {                                        aLi[j].innerHTML !== selectCity ? oUl.appendChild(oLi)                                                : oUl.insertBefore(aLi[j], aLi[0]);                                    }()                                })(j);*/                            }                        }                    }                })(i);            }        }    </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><ul id="list"></ul></body></html>
0 0