【原創】防止重複添加 / 數組和對象 / 兩種實現方法

前言：數組和對象，都可以判斷是否有重複信息。以下圖：

 實現原理：

1. 頁面中須要給每一個點擊dom給一個id；
2. 每次點擊將id取過來，而後將此id----》存到數組/對象中
3. 經過對數組或對象的判斷，是否含有重複項，而後執行追加。

 

第一種：數組，indexOf方法

js以下，若是 if (my_arr.indexOf(li_id)>=0){   //大於等於0，則數組中存在。不存在返回的是：-1

$(function(){		
	var my_arr = [];
	$(".list-group li").click(function(){	

		li_id = this.getAttribute('data-id'); 

		if (my_arr.indexOf(li_id)>=0){   //大於等於0，則數組中存在
		    alert("添加已存在！")
		    return false;
		    
			//【查找索引值】-查找指定元素的索引值
			          //           0     1     2     3     4
			//			var a = ["chai","yu","long","ni","hao"]
			//			alert(a.indexOf("yu"))
			
		}
		else{
			my_arr.push(li_id)
		 	$(this).clone().appendTo('ul#result'); //下面的不須要
		 	console.log(my_arr)
		 }
			
	})
})

這裏僅僅只是提到數組添加，數組刪除見另外一個文章：

【原創】jquery-左 選到 右 -全程數組控制 https://my.oschina.net/u/583531/blog/1558814 

 

 第二種：對象，in運算符。

$(function(){		
	var my_data = {}; //建立對象
	$(".list-group li").click(function(){	
		li_id = this.getAttribute('data-id'); 

		if (li_id in my_data == true){  //用in屬性判斷對象中是否有某一屬性
		    alert("添加已存在！")
		    return false;
		}
		else{
			my_data[li_id] = {} //給對象建立屬性 ，
			
		 	$(this).clone().appendTo('ul#result'); 
		 	
		 	console.log(my_data)
		 }
			
	})
})

公共的html以下，  給每一個li給出data-id，

<div class="container">
	<ul class="list-group">
	    <li class="list-group-item" data-id="ycl" data-price="120">氧車樂</li>
	    <li class="list-group-item" data-id="qc"  data-price="220">汽車</li>
	    <li class="list-group-item" data-id="fw"  data-price="320">服務</li>
	    <li class="list-group-item" data-id="yx"  data-price="420">有限</li>
	    <li class="list-group-item" data-id="gs"  data-price="520">公司</li>
	</ul>
	<br />
	<ul class="list-group" id="result" >
	   <li  class="list-group-item" >點擊後直接克隆獲得以下結果</li>
	</ul>
</div>