jquery实现筛选商品效果，每个种类只能选择一个

最新推荐文章于 2022-12-26 13:19:46 发布

summer_my_sunshine

最新推荐文章于 2022-12-26 13:19:46 发布

阅读量3.6k

点赞数

本文链接：https://blog.csdn.net/summer_my_sunshine/article/details/80500096

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script src="js/jquery.min.js"></script>
<style>
/*初始化*/
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: #666666;
}
body,p,ul,li,h1,h2,h3,h4,input,dd,tr,i{
margin: 0;
padding: 0;
}
body{
font-size: 14px;
font-family: Arial,"microsoft yahei";
}
.main{
width: 1200px;
margin: 0 auto;
}
a img{
border:none;
}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

/*筛选*/
.filter-title{
line-height: 36px;
height: 36px;
background: #f1f1f1;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 0 10px;
margin-bottom: 10px;
}
.filter-title span:first-child{
color: #f42121;
padding-right: 5px;
}
.filter-title span:nth-child(2){
color: #999;
padding-left: 20px;
}
.filter-title i.fa-angle-right{
padding-left: 5px;
font-size: 18px;
}
.filter-title button{
line-height: 24px;
height: 24px;
padding: 0 10px;
border: none;
outline: medium;
color: #fff;
}
.filter-title button.filter-btn{
background: #F42121;
margin-left: 20px;
}
.filter-title button.empty-btn{
background: #aaa;
}
.filter-title a{
border: 1px solid #ddd;
color: #666;
display: inline-block;
line-height: 24px;
padding: 0 10px;
background: #fff;
margin-right: 5px;
}
.filter-title a i{
padding-left: 5px;
}
.filter-title a:hover{
border-color: #F42121;
}
.filter-title a:hover i{
color: #F42121;
}

.filter-item{
border-bottom: 1px dashed #ddd;
padding-top: 5px;
}
.filter-item:last-child{
border-bottom: none;
}
.filter-left{
width: 80px;
float: left;
}
.filter-center{
width: 1120px;
float: left;
padding-bottom: 5px;
}
.filter-center ul{
max-height: 84px;
}
.filter-center li{
float: left;
text-align: center;
background: #fff;
}
.filter-center li a{
display: block;
overflow: hidden;
line-height: 34px;
padding: 0 15px;
height: 34px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //文本行数
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid #ddd;
margin: 3px;
}
.filter-center li a:hover,.filter-center li a.active{
color: #F42121;
border-color: #F42121;
}
</style>
</head>
<body>
<div class="filter-box main">
<div class="filter-title">
<span>水泥</span>
已选<i class="fa fa-angle-right"></i>
<span class="filter-con">

</span>
<button class="filter-btn">筛选</button>
<button id="empty" class="empty-btn">全部清空</button>
</div>
<div>
<div class="filter-item clearfloat">
<div class="filter-left">品牌：</div>
<div class="filter-center">
<ul class="clearfloat">
<li>
<a href="javascript:;">华润1</a>
</li>
<li>
<a href="javascript:;">华润2</a>
</li>
<li>
<a href="javascript:;">华润3</a>
</li>
</ul>
</div>
</div>
<div class="filter-item clearfloat">
<div class="filter-left">规格：</div>
<div class="filter-center">
<ul class="clearfloat">
<li>
<a href="javascript:;">规格1</a>
</li>
<li>
<a href="javascript:;">规格2</a>
</li>
<li>
<a href="javascript:;">规格3</a>
</li>
</ul>
</div>
</div>
<div class="filter-item clearfloat">
<div class="filter-left">测试：</div>
<div class="filter-center">
<ul class="clearfloat">
<li>
<a href="javascript:;">规格1</a>
</li>
<li>
<a href="javascript:;">规格2</a>
</li>
</ul>
</div>
</div>
</div>
</div>


<script>
$(function(){

/*点击品类*/
$(".filter-item .filter-center a").click(function(){
$(this).parent("li").siblings().children("a").removeClass("active");
$(this).addClass("active");

$(".filter-title .filter-con").empty();

$(".filter-item .filter-center a.active").each(function(){
var txt=$(this).text();
var title=$(this).parents(".filter-center").prev(".filter-left").text();
var html="<a href='javascript:;'>"+title+txt+"<i class='fa fa-times'></i></a>";

$(".filter-title .filter-con").append(html);
deleteOne();
})
})

//全部清空
$("#empty").click(function(){
$(".filter-title .filter-con").empty();
$(".filter-item .filter-center a").removeClass("active");
})

//删除某个
function deleteOne(){
$(".filter-title .filter-con a").click(function(){
var tip=$(this).text().substring(0,3);
$(".filter-item .filter-left").each(function(){
if($(this).text()==tip){
$(this).parent(".filter-item").children(".filter-center").find("a").removeClass("active");
}
})
$(this).remove();
})
}

})
</script>

</body>
</html>

summer_my_sunshine

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现筛选商品效果，每个种类只能选择一个

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="css/font-awesome.min.css" /&gt;
复制链接

扫一扫