javascript 利用 - 枚举思想 - 添加地名的一个小例子
利用枚舉思想來添加地名，主要功能是：判斷點擊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]);
? ? ?? }
? ? ?}
?}
轉載于:https://www.cnblogs.com/zion0707/p/3889389.html
總結
以上是生活随笔為你收集整理的javascript 利用 - 枚举思想 - 添加地名的一个小例子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 原神占卜第三天怎么做?
- 下一篇： [C#]判断是否是合法的IP4,IP6地