javascript 利用 - 枚举思想 - 添加地名的一个小例子

利用枚举思想来添加地名，主要功能是：判断点击a标签（即当前的地名）如果在ul的li不存在的话那么就添加，有则不添加，而且还提供了相应的排序功能...

 

HTML代码：

广州

深圳

上海

杭州

武汉

天津

 

JAVASCRIPT代码：

 

//选择元素

var oChinaChild = document.querySelectorAll('#china a');

var oUl1 = document.querySelector('#ul1');

var aLi = oUl1.getElementsByTagName('li');

//遍历 a 标签 

for(var i=0;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

       //如果ul 所以 li 中 有当前元素这个内容那么就返回false

       if (aLi[i].innerHTML == text ) {

        result = false;

       }

   }

  //返回 result 

  return result;

}

 

//枚举函数2 : 作用是如果点击当前的地名,已经存在的话，那么执行的是插到最前面

function mj2(text){

     //遍历ul所有li元素

     for(var i=0;i

        //判断如果当前值存在li中那么就执行下面代码

      if (aLi[i].innerHTML == text) {

           //插到最前面

           oUl1.insertBefore(aLi[i],aLi[0]);

       }

     }

 }