标签：style color java strong io for cti ar
利用枚举思想来添加地名，主要功能是：判断点击a标签（即当前的地名）如果在ul的li不存在的话那么就添加，有则不添加，而且还提供了相应的排序功能...
HTML代码：
<div id="china">
<a href="javascript:;">广州</a>
<a href="javascript:;">深圳</a>
<a href="javascript:;">上海</a>
<a href="javascript:;">杭州</a>
<a href="javascript:;">武汉</a>
<a href="javascript:;">天津</a>
</div>
<ul id="ul1"></ul>
JAVASCRIPT代码：
//选择元素
var oChinaChild = document.querySelectorAll(‘#china a‘);
var oUl1 = document.querySelector(‘#ul1‘);
var aLi = oUl1.getElementsByTagName(‘li‘);
//遍历 a 标签
for(var i=0;i<oChinaChild.length;i++){
//定义a标签的点击事件
oChinaChild[i].addEventListener(‘click‘,fn1,false);
}
function fn1(){
//这里做判断是否用来添加li元素
//这里的this.innerHTML代表的是当前a标签的内容，主要靠第一个枚举的方法来判断是否要执行第一段代码
if (mj1(this.innerHTML)) {
var oLi = document.createElement(‘li‘);
oLi.innerHTML = this.innerHTML;
//如果没有li标签那么就往后添
if(!aLi[0]){
oUl1.appendChild(oLi);
}else{
//否则就往前插
oUl1.insertBefore(oLi,aLi[0]);
}
}else{
//进行第二个枚举函数
mj2(this.innerHTML);
}
}
//枚举函数1 : 利用这个函数来判断是否要添加地名
function mj1(text){
//先定义一个为 result 的变量
var result = true;
//遍历ul所有的li元素
for( var i=0; i<aLi.length ; i++){
//如果ul 所以 li 中 有当前元素这个内容那么就返回false
if (aLi[i].innerHTML == text ) {
result = false;
}
}
//返回 result
return result;
}
//枚举函数2 : 作用是如果点击当前的地名,已经存在的话，那么执行的是插到最前面
function mj2(text){
//遍历ul所有li元素
for(var i=0;i<aLi.length;i++){
//判断如果当前值存在li中那么就执行下面代码
if (aLi[i].innerHTML == text) {
//插到最前面
oUl1.insertBefore(aLi[i],aLi[0]);
}
}
}
javascript 利用 - 枚举思想 - 添加地名的一个小例子,布布扣,bubuko.com
javascript 利用 - 枚举思想 - 添加地名的一个小例子
标签：style color java strong io for cti ar
原文地址：http://www.cnblogs.com/zion0707/p/3889389.html
