jq列表筛选,根据品牌,风格来筛选效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div>
模式1：
<button data-id="1"> 欧式</button>
<button data-id="2">美式</button>
<button data-id="4">其他</button>
</div>
<div>模式2：
<button class="btn2" data-id="1">欧式</button>
<button class="btn2" data-id="2">美式</button>
</div>
<ul>
<li data-ids="1"><span>欧式</span></li>
<li data-ids="1 3"><span>欧式</span></li>
<li data-ids="1 2"><span>欧式</span><span> 美式</span></li>
<li><span>其他</span></li>
<li><span>现代</span></li>
<li><span>现代</span></li>
<li><span>古老</span></li>
<li><span>传统</span></li>
<li data-ids=""><span>其他</span></li>
<li data-ids="2"><span>美式</span></li>
<li><span>美式</span></li>
<li><span>美式</span></li>
<li><span>美式</span></li>
<li><span>美式</span></li>
<li><span>其他</span></li>
</ul>
<script>
Array.prototype.unique1 = function () {
var res = [this[0]];
for (var i = 1; i < this.length; i++) {
var repeat = false;
for (var j = 0; j < res.length; j++) {
if (this[i] == res[j]) {
repeat = true;
break;
}
}
if (!repeat) {
res.push(this[i]);
}
}
return res;
}
$(function () {
//id模式
$('button').click(function () {
dataId = $(this).attr('data-id');
$('ul li').each(function () {
//默认隐藏
$(this).hide();
dataIds = $(this).attr('data-ids');
if (dataIds != undefined && dataIds != '') {
ids = dataIds.split(" ");//空格分隔成数组
for (i = 0; i < ids.length; i++) {
if (ids[i].trim() == dataId.trim()) {
//存在显示，并结束本次循环
$(this).show();
break;
}
}
}
});
});
//初始化-隐藏不存在按钮
var listIds = [];
$('ul li').each(function () {
//默认隐藏
dataIds = $(this).attr('data-ids');
if (dataIds != undefined && dataIds != '') {
ids = dataIds.split(" ");//空格分隔成数组
for (i = 0; i < ids.length; i++) {
listIds.push(ids[i]);
}
}
});
listIds = listIds.unique1();
$('button').each(function () {
dataId = $(this).attr('data-id');
$(this).hide();
var hasId = false;
for (i = 0; i < listIds.length; i++) {
if (listIds[i] == dataId)
hasId = true;
}
if (hasId)
$(this).show();
})
console.log();
//文字模式
$('button.btn2').click(function () {
text = $(this).text();
$('ul li').each(function () {
$(this).hide();
var hasText = false;
$(this).find('span').each(function () {
//判断去除空格的文字
if (text.trim() == $(this).text().trim()) {
hasText = true;
}
});
if (hasText) {
$(this).show();
}
})
})
});
</script>
</body>
</html>按风格筛选(多个).
下面按品牌筛选:(单个):
$('.brand_letter li').click(function () {
$(this).addClass('cu').siblings('li').removeClass('cu');
var name = $(this).find('a').text();
if ($(this).hasClass("allBrandName")) {
$(".ppjTab_brand li").show();
return;
}
if (name) {
if (name == "─")
name = " ";
var brandItemShow = $(".ppjTab_brand li[data-type='" + name + "']");
var brandItemHide = $(".ppjTab_brand li[data-type!='" + name + "']");
brandItemShow.show();
brandItemHide.hide();
$('.bandHList li').show();
}
})
本文作者： Jasmine
本文链接： https://www.jianbaizhan.com/article/583
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！