分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery制作仿京东商城-商品列表商品筛选功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

这次使用jquery来实现一个仿京东商城-商品列表商品筛选的功能

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class=‘container‘>
	<div class=‘filter‘>
		<span>已选条件：</span>
		<div class=‘itme‘>
			<!-- <a>
				×  <span>惠普</span>
			</a> -->
		</div>
	</div>
	<div class=‘store‘>
		<dl>
			<dt>品牌：</dt>
			<dd><div><a>全部</a></div></dd>
			<dd><div><a>惠普(hp)</a></div></dd>
			<dd><div><a>联想(Lenovo)</a></div></dd>
			<dd><div><a>联想(ThinkPad)</a></div></dd>
			<dd><div><a>宏基(acer)</a></div></dd>
			<dd><div><a>华硕</a></div></dd>
			<dd><div><a>戴尔</a></div></dd>
			<dd><div><a>三星</a></div></dd>
			<dd><div><a>索尼</a></div></dd>
			<dd><div><a>东芝</a></div></dd>
			<dd><div><a>Gateway</a></div></dd>
			<dd><div><a>微星</a></div></dd>
			<dd><div><a>海尔</a></div></dd>
			<dd><div><a>清华同方</a></div></dd>
			<dd><div><a>富士通</a></div></dd>
			<dd><div><a>苹果(ApplE)</a></div></dd>
			<dd><div><a>神舟</a></div></dd>
			<dd><div><a>方正</a></div></dd>
			<dd><div><a>优雅</a></div></dd>
		</dl>
		<dl>
			<dt>价格：</dt>
			<dd><div><a>全部</a></div></dd>
			<dd><div><a>1000-2999</a></div></dd>
			<dd><div><a>3000-3499</a></div></dd>
			<dd><div><a>3500-3999</a></div></dd>
			<dd><div><a>4000-4499</a></div></dd>
			<dd><div><a>4500-4999</a></div></dd>
			<dd><div><a>5000-5999</a></div></dd>
			<dd><div><a>6000-6999</a></div></dd>
			<dd><div><a>7000-9999</a></div></dd>
			<dd><div><a>10000以上</a></div></dd>
		</dl>
		<dl>
			<dt>尺寸：</dt>
			<dd><div><a>全部</a></div></dd>
			<dd><div><a>8.9英寸及以下</a></div></dd>
			<dd><div><a>11英寸</a></div></dd>
			<dd><div><a>12英寸</a></div></dd>
			<dd><div><a>13英寸</a></div></dd>
			<dd><div><a>14英寸</a></div></dd>
			<dd><div><a>15英寸</a></div></dd>
			<dd><div><a>16英寸-17英寸</a></div></dd>
		</dl>
		<dl>
			<dt>平台：</dt>
			<dd><div><a>全部</a></div></dd>
			<dd><div><a>AMD Brazos APU平台</a></div></dd>
			<dd><div><a>Intel S@R_616_10430@ Bridge平台</a></div></dd>
			<dd><div><a>Intel平台</a></div></dd>
			<dd><div><a>AMD平台</a></div></dd>
		</dl>
		<dl>
			<dt>显卡：</dt>
			<dd><div><a>全部</a></div></dd>
			<dd><div><a>独立显卡</a></div></dd>
			<dd><div><a>集成显卡</a></div></dd>
			<dd><div><a>核芯显卡</a></div></dd>            
		</dl>
	</div>
</div>
<script type="text/javascript" src=‘js/jquery-1.10.2.min.js‘></script>
<script type="text/javascript">
var arr = [];
$(function(){

	$(".store dt+dd a").attr("class",‘all-color‘);
	$(".store a").click(function(){
		$(this).parents("dl").children(‘dd‘).each(function(){
			$(this).children(‘div‘).children(‘a‘).removeClass("all-color")
		})
		$(this).attr("class",‘all-color‘);

		$(this).parentsUntil("dl").parent().hide();

		arr.push($(this));
		var val = $(this).html();

		var domItem = `<a 
							onclick=deletes(‘${val}‘)
							rel=‘${val}‘
						>
						×  <span>${val}</span>
					   </a>`;
		$(".itme").append(domItem);
	})

})
function deletes(val){

	$(".filter").find("a[rel=‘"+val+"‘]").remove();
	for(var i=0;i<arr.length;i++){
		if(arr[i].html() == val ){
			arr[i].parentsUntil("dl").parent().show();
			arr.splice(i,1);
			i--;
		}else{
			arr[i].parentsUntil("dl").parent().hide();
		}
	}

}

</script>
</body>
</html>

二、css代码

*{margin:0;padding:0;}
ul{list-style: none;}
a{text-decoration: none;cursor:pointer;}
.container{
	width:720px;
	margin:20px auto 0 auto;
	border-width: 2px 1px 0 1px;
	border-color: #ff5500 #ccc #ccc #ccc;
	border-style:solid;
}
.filter{
	padding:10px 0 10px 36px;
	BACkground: #f2f2f2;
	border-bottom:1px solid #ccc;
	font-size:14px;
	display: flex;
}
.itme{
	margin-left:10px;
}
.itme a{
	padding:0 10px;
	margin:0 5px;
	border:1px solid #ff5500;
	border-radius: 5px;
	BACkground: #fff;
	color:red;
}
.store dl{
	padding: 0 0 15px 110px;
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-wrap: wrap;
	font-size:12px;
}
.store dl dt{
	width:110px;
	margin:15px 0 0 -110px;
	text-align: right;
	line-height: 16px;
	font-size:14px;
	color:#404040;
	font-weight: bold;
}
.store dl dd{
	margin:12px 18px 0 0;
}
.all-color{
	BACkground: blue;
	color:#fff;
}