枚举算法：不重复选择

<!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>
最后编辑于：2017.12.05 05:22:08
枚举算法：不重复选择

推荐阅读更多精彩内容
