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

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

HTML代码：

</div>

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]);

}

转载于:https://www.cnblogs.com/zion0707/p/3889389.html

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

利用JML开发的一个小例子，附详细注释
利用JML开发的一个小例子,附详细注释.有问题的地方希望大家能帮我提出来,呵呵 /**/ /* * msntest.java * * Created on 2007年4月11日, 下午1:40 ...
C# 实现 rtc_通过Xlua实现unity热更新的一个小例子
通过Xlua实现unity热更新的一个小例子一.介绍热更新是指在更新游戏资源或者逻辑的时候不需要开发者将游戏再打包.发布.玩家重新下载安装包,而是可以通过将需要更新的资源打包成AssetBun ...
unity案例 mysql lua_通过Xlua实现unity热更新的一个小例子
通过Xlua实现unity热更新的一个小例子一.介绍热更新是指在更新游戏资源或者逻辑的时候不需要开发者将游戏再打包.发布.玩家重新下载安装包,而是可以通过将需要更新的资源打包成AssetBun ...
生成句法分析树以及从一个小例子来看词义消歧及语义角色标注
一.生成句法分析树把一句话按照句法逻辑组织成一棵树,由人来做这件事是可行的,但是由机器来实现是不可思议的,然而算法世界就是这么神奇,把一个十分复杂的过程抽象成仅仅几步操作,甚至不足10行代码,就能让 ...
从一个小例子看贝叶斯公式的应用（学习简单、基础、入门的例子）
#从一个小例子看贝叶斯公式的应用 ###应用Bayesian公式考察如下的实例并回答问题. 张某为了解自己患上了X疾病的可能性,去医院作常规血液检查.其结果居然为阳性,他赶忙到网上查询.根据网上的资料 ...
MVVM模式的一个小例子
使用SilverLight.WPF也有很长时间了,但是知道Binding.Command的基本用法,对于原理性的东西,一直没有深究.如果让我自己建一个MVVM模式的项目,感觉还是无从下手,最近写了一个 ...
飞鸽传书举一个小例子
飞鸽传书举一个小例子,每个程序窗口右上角都有三个按钮,如最小化.关闭等.乔布斯觉得不好看,不易用,他提出改用红绿蓝的交通灯.这样修改后,果然 Mac OS 漂亮和易用了很多. 目前互联网和手机上的应用 ...
puppet运行慢的一个小例子
一个小例子来看下怎么debug puppet运行慢的问题. 一个小例子来看下怎么debug puppet运行慢的问题. 发现一台机器的agent运行比较缓慢,首先看下puppet server的整体性 ...
html5 websocket插件,html5实现的WebSocket一个小例子（附代码）
本篇文章给大家带来的内容是关于html5实现的WebSocket一个小例子(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 客户端代码: var socket; if (&q ...

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

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

最新文章

热门文章