多个列表，js操作隐藏同行中的相同属性值

最新推荐文章于 2023-12-04 09:38:09 发布

罗雀儿

最新推荐文章于 2023-12-04 09:38:09 发布

阅读量924

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_22165667/article/details/82803919

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

需求场景：

选择一个商品，显示所有店家的不同属性，每个ul代表一个店家，每行的li代表一种属性

效果如下：

点击显示全部：	点击隐藏相同项按钮后：

解决思路：

隐藏按钮实现：

遍历ul,在遍历每个url里的li

遍历第一个ul的li时，把每个li的值添加到attr数组作为对比的初始值，并用一个data数组默认为true标识已重复

遍历第二次ul起，去li的值与attr进行对比，如果不同则把data对应的坐标标识为false，相同则还是为true(注意：如果已经是false，则不能再标识为true);

遍历ul与li，根据data数组，把相同的li的text的值赋值给新属性value2,并把text替换为/

显示按钮实现：

把li标签中value2的值赋值给text

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.1.9.1.min.js.js" type="text/javascript"></script>
</head>
<body>
 <ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>0</li>
 </ul>
  <ul>
	<li>2</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
 </ul>
  <ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>3</li>
	<li>5</li>
 </ul>
 <button onclick="hideFn()">隐藏相同项</button>
  <button onclick="showFn()">显示全部</button>
<script>

	function hideFn(){
	 var data=[];
	 var attr=[];
	 $.each($('ul'), function(index,item){
		$.each($(item).children(),function(i){
			if(index==0){
			
				attr.push($(this).text());
				data.push(true);
			}
			if($(this).text()==attr[i]){
				data[i]= data[i]==false?false:true;
			}else{
				data[i]=false;
			}
		});
		
	 }); 
	 
	 $.each($('ul'), function(index,item){
		$.each($(item).children(),function(i){
			if(data[i]==true){
				if($(this).text()!='/'){
					$(this).attr("value2",$(this).text());
				}
				$(this).text('/');
			}
		});
		
	 }); 
	}
	
	function showFn(){
		$.each($('ul'), function(index,item){
		$.each($(item).children(),function(i){
			if($(this).attr("value2")){
				$(this).text($(this).attr("value2"));
			}
			
		});
		
	 }); 
	}
	
</script>
</body>
</html>

需注意：给li的value属性赋值，得到的却是0；这是需要自定义一个属性，这样子才能赋值成功。

原因：ul 中的li定义的value会自动转换为int.数值，ie 浏览器下大于int最大值，显示int最大值，其他浏览器显示为0.而且无论你定义什么值，都会转int.默认为1，

罗雀儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多个列表，js操作隐藏同行中的相同属性值

需求场景：选择一个商品，显示所有店家的不同属性，每个ul代表一个店家，每行的li代表一种属性效果如下：点击显示全部：点击隐藏相同项按钮后：解决思路：隐藏按钮实现：遍历ul,在遍历每个url里的li遍历第一个ul的li时，把每个li的值添加到attr数组作为对比的初始值，并...
复制链接

扫一扫