【原创】防止重复添加 / 数组和对象 / 两种实现方法

2019独角兽企业重金招聘Python工程师标准>>>

前言：数组和对象，均可以判断是否有重复信息。如下图：

 实现原理：

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>	

 

转载于:https://my.oschina.net/u/583531/blog/1537027