html
<div id="tpl-contents">
<div class="tpl-inner-wrap">
<div id="sec-list">
<h1 class="sec-title">List filter</h1>
<ul class="filter">
<!--<li><a href="" class="is-active">all</a></li>
<li><a href="">cate01</a></li>
<li><a href="">cate02</a></li>
<li><a href="">cate03</a></li>-->
</ul>
<ul class="list">
</ul><!-- /list -->
</div><!-- /sec-list -->
<div class="text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis dolor id diam mollis, vitae pretium nunc scelerisque. Suspendisse ultricies purus ante, vitae dapibus tortor maximus non. Morbi ut odio gravida, efficitur erat eget, pretium purus. Fusce ut libero ac libero sodales condimentum vel a nisl. Sed suscipit enim non nisi semper, imperdiet volutpat ligula bibendum. Vestibulum vitae dictum lorem. Curabitur sed mi nulla. Maecenas diam metus, lacinia id gravida eget, congue sit amet mi. Phasellus vitae odio quis augue elementum tincidunt at quis sapien. Duis vitae metus iaculis, ullamcorper nibh sed, euismod diam. Fusce non nunc massa.</p>
<p>Mauris eget accumsan ipsum. Etiam quis porttitor arcu. Vestibulum ornare mi cursus dui vestibulum pellentesque. Maecenas scelerisque nunc eget sollicitudin aliquet. Suspendisse tempor metus sit amet ipsum viverra, id malesuada leo feugiat. Etiam dictum neque a elementum accumsan. In hac habitasse platea dictumst. Curabitur id tellus lectus. Pellentesque nulla nisl, fringilla sit amet lobortis sed, lobortis nec arcu. Morbi non urna ullamcorper, tincidunt enim ut, convallis tellus. Etiam consectetur id leo vitae ultrices. Quisque et nibh ut lectus vehicula porttitor. Nam malesuada odio nisl, ut porttitor tortor interdum in.</p>
</div>
</div>
</div><!-- /tpl-contents -->
js
$(function() {
var Olist = $(‘#sec-list‘);
var Ofilter = $(‘#sec-list‘).find(‘.filter‘);
var Olist = $(‘#sec-list‘).find(‘.list‘);
var Acate = Olist.find(‘.cate‘);
var listData = []
//获取json数据
$.ajax({
type: ‘GET‘,
url: ‘json/cate.json‘,
dataType: ‘json‘,
success: function(data) {
listData = data;
htmlData(data);
initFilter();
}
});
//点击按钮触发事件 核心内容
$(‘.filter‘).on(‘click‘, "li", function() {
var switct = $(this).text().trim();
console.log(switct);
var newList = []
for(var i = 0; i < listData.length; i++) {
for(var j = 0; j < listData[i].cate.length; j++) {
if(listData[i].cate[j] == switct) {
newList.push(listData[i])
}
}
}
if(switct == "all") {
htmlData(listData);
} else {
htmlData(newList)
}
})
function initFilter() {
var cateList = [];
var Call = ‘<li><a href="#" class="is-active">all</a></li>‘; //all按钮
var tempList = [];
for(var i = 0; i < listData.length; i++) {
var Cate = ‘‘;
for(var j = 0; j < listData[i].cate.length; j++) {
if(tempList.indexOf(listData[i].cate[j]) == -1) {
tempList.push(listData[i].cate[j]);
cateList.push(‘<li><a href="#">‘ + listData[i].cate[j] + ‘</a></li>‘);
console.log(listData[i].cate[j]);
}
}
}
Ofilter.html(Call + cateList);
}
function htmlData(data) {
if(data.length) {
var arr = [];
var jsons = {};
var Cfilter = ‘‘;
var Call = ‘‘;
var Clist = ‘‘;
//主内容从json中获取
for(var i = 0; i < data.length; i++) {
var Cate = ‘‘;
for(var j = 0; j < data[i].cate.length; j++) {
Cate += ‘<li>‘ + data[i].cate[j] + ‘</li>‘;
}
Clist += ‘<li class="item">‘ +
‘<p class="photo"><img src="img/‘ + data[i].thumb + ‘" ></p>‘ +
‘<p class = "title" >‘ + data[i].title + ‘ </p>‘ +
‘<p class = "description" >‘ + data[i].description + ‘ </p>‘ +
‘<ul class="cate">‘ + Cate + ‘</ul>‘ +
‘</li>‘
Olist.html(Clist);
}
}
}
});