當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

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

發(fā)布時(shí)間：2023/11/27 生活经验 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript 利用 - 枚举思想 - 添加地名的一个小例子小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

利用枚舉思想來添加地名，主要功能是：判斷點(diǎn)擊a標(biāo)簽（即當(dāng)前的地名）如果在ul的li不存在的話那么就添加，有則不添加，而且還提供了相應(yīng)的排序功能...

HTML代碼：

</div>

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(){

??//這里做判斷是否用來添加li元素

?//這里的this.innerHTML代表的是當(dāng)前a標(biāo)簽的內(nèi)容，主要靠第一個(gè)枚舉的方法來判斷是否要執(zhí)行第一段代碼

if (mj1(this.innerHTML)) {

? ? ? var oLi = document.createElement('li');

? ? ? oLi.innerHTML = this.innerHTML;

? ? ???//如果沒有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ù)來判斷是否要添加地名

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ǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。