<!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>
枚举算法：不重复选择
来源：花图问答