javascript 利用 - 枚举思想 - 添加地名的一个小例子
利用枚舉思想來(lái)添加地名，主要功能是：判斷點(diǎn)擊a標(biāo)簽（即當(dāng)前的地名）如果在ul的li不存在的話那么就添加，有則不添加，而且還提供了相應(yīng)的排序功能...
?
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 標(biāo)簽?
for(var i=0;i<oChinaChild.length;i++){
//定義a標(biāo)簽的點(diǎn)擊事件
oChinaChild[i].addEventListener('click',fn1,false);
}
?
function fn1(){
??//這里做判斷是否用來(lái)添加li元素
?//這里的this.innerHTML代表的是當(dāng)前a標(biāo)簽的內(nèi)容，主要靠第一個(gè)枚舉的方法來(lái)判斷是否要執(zhí)行第一段代碼
if (mj1(this.innerHTML)) {
? ? ? var oLi = document.createElement('li');
? ? ? oLi.innerHTML = this.innerHTML;
? ? ???//如果沒(méi)有l(wèi)i標(biāo)簽?zāi)敲淳屯筇?/span>
? ? ? ?if(!aLi[0]){
? ? ? ? ?oUl1.appendChild(oLi);
? ? ? ? }else{
? ? ? ?//否則就往前插
? ? ? ? oUl1.insertBefore(oLi,aLi[0]);
? ? ? ?}
}else{
? ? ??? //進(jìn)行第二個(gè)枚舉函數(shù)
? ? ? ? ?mj2(this.innerHTML);
? ? }
}
?
?
//枚舉函數(shù)1 : 利用這個(gè)函數(shù)來(lái)判斷是否要添加地名
function mj1(text){
?
? ?//先定義一個(gè)為 result 的變量
? ?var result = true;
???//遍歷ul所有的li元素
? ?for( var i=0; i<aLi.length ; i++){
? ? ???//如果ul 所以 li 中 有當(dāng)前元素這個(gè)內(nèi)容那么就返回false
? ? ? ?if (aLi[i].innerHTML == text ) {
? ? ? ? result = false;
? ? ? ?}
? ?}
? //返回 result?
? return result;
}
?
//枚舉函數(shù)2 : 作用是如果點(diǎn)擊當(dāng)前的地名,已經(jīng)存在的話，那么執(zhí)行的是插到最前面
function mj2(text){
? ? ?//遍歷ul所有l(wèi)i元素
? ? ?for(var i=0;i<aLi.length;i++){
? ? ? ??//判斷如果當(dāng)前值存在li中那么就執(zhí)行下面代碼
? ? ? if (aLi[i].innerHTML == text) {
? ? ? ? ???//插到最前面
? ? ? ? ? ?oUl1.insertBefore(aLi[i],aLi[0]);
? ? ?? }
? ? ?}
?}
轉(zhuǎn)載于:https://www.cnblogs.com/zion0707/p/3889389.html
總結(jié)
以上是生活随笔為你收集整理的javascript 利用 - 枚举思想 - 添加地名的一个小例子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 原神占卜第三天怎么做?
- 下一篇： [C#]判断是否是合法的IP4,IP6地