单一归类
var user = [{ "id": "1", "name": "小明", "sex": "1" },{ "id": "2", "name": "小黄", "sex": "1" },{ "id": "3", "name": "小红", "sex": "2" },{ "id": "4", "name": "小绿", "sex": "2" }];var sex = [{ "id": "1", "sex": "男" },{ "id": "2", "sex": "女" }]// 目标数据 var cache = {// 1:[{"id":"1","name":"小明","sex":"1"},{"id":"2","name":"小黄","sex":"1"}],// 2:[{"id":"1","name":"小红","sex":"2"},{"id":"2","name":"小绿","sex":"2"}]// }var cache = {};sex.forEach(function (sex) {// console.log(sex.sex);var _id = sex.id;cache[_id] = [];user.forEach(function (user) {var _sex = user.sex;if (_sex == _id) {cache[_id].push(user);}});});console.log(cache);
复合归类
var hobby = [
{ "id": "1", "name": "足球" },
{ "id": "2", "name": "蓝球" },
{ "id": "3", "name": "排球" },
{ "id": "4", "name": "乒乓球" },
{ "id": "5", "name": "保龄球" },
{ "id": "6", "name": "高尔夫球" }
]
var person = [
{ "name": "小明", "hobby": "1,3" },
{ "name": "小花", "hobby": "1,4" },
{ "name": "小黄", "hobby": "2,5" },
{ "name": "小白", "hobby": "5,6" },
{ "name": "小青", "hobby": "3,2" },
{ "name": "小兰", "hobby": "1,2,3" },
{ "name": "小红", "hobby": "3,5" },
{ "name": "小绿", "hobby": "2,4,5,6" },
]
// 目标数据 var cache = {
// 1: [{ "name": "小明", "hobby": "1,3" }, { "name": "小花", "hobby": "1,4" }, { "name": "小兰", "hobby": "1,2,3" }],
// 2: [{ "name": "小黄", "hobby": "2,5" },{ "name": "小青", "hobby": "3,2" },{ "name": "小兰", "hobby": "1,2,3" },{ "name": "小绿", "hobby": "2,4,5,6" }],
// 3: [{ "name": "小青", "hobby": "3,2" },{ "name": "小兰", "hobby": "1,2,3" },{ "name": "小红", "hobby": "3,5" }],
// 4: [{ "name": "小花", "hobby": "1,4" },{ "name": "小绿", "hobby": "2,4,5,6" }]
// }
var cache = {
}
hobby.forEach(function (hobby) {
var _id = hobby.id;
cache[_id] = [];
person.forEach(function (person) {
// 循坏person数组中的hobby属性
var _hobbyArr = person.hobby.split(',');
_hobbyArr.forEach(function (elem) {
if (elem == _id) {
cache[_id].push(person);
}
})
})
})
console.log(cache);
封装归类函数 sortDatas
function sortDatas(sort, data) {
var cache = {};
return function (foreign_key, sortType) {
// 如果既不是单一归类或者复合归类
if (sortType !== 'single' && sortType !== 'multi') {
console.log(new Error('Invalid sort type.[Only "single" and "multi" are valid values]'));
return;
}
sort.forEach(function (sort) {
var _id = sort.id;
cache[_id] = [];
data.forEach(function (elem) {
var foreign_val = elem[foreign_key];
switch (sortType) {
case 'single':
if (foreign_val == _id) {
cache[_id].push(elem);
};
break;
case 'multi':
var _arr = foreign_val.split(',');
_arr.forEach(function (val) {
if (val === _id) {
cache[_id].push(elem);
}
});
break;
default:
break;
}
});
});
return cache;
}
}
应用
// 单一归类
var users = [
{ "id": "1", "name": "小明", "sex": "1" },
{ "id": "2", "name": "小黄", "sex": "1" },
{ "id": "3", "name": "小红", "sex": "2" },
{ "id": "4", "name": "小绿", "sex": "2" }
];
var sex = [
{ "id": "1", "sex": "男" },
{ "id": "2", "sex": "女" }
]
// 复合归类
var hobby = [
{ "id": "1", "name": "足球" },
{ "id": "2", "name": "蓝球" },
{ "id": "3", "name": "排球" },
{ "id": "4", "name": "乒乓球" },
{ "id": "5", "name": "保龄球" },
{ "id": "6", "name": "高尔夫球" }
]
var person = [
{ "name": "小明", "hobby": "1,3" },
{ "name": "小花", "hobby": "1,4" },
{ "name": "小黄", "hobby": "2,5" },
{ "name": "小白", "hobby": "5,6" },
{ "name": "小青", "hobby": "3,2" },
{ "name": "小兰", "hobby": "1,2,3" },
{ "name": "小红", "hobby": "3,5" },
{ "name": "小绿", "hobby": "2,4,5,6" },
]
var singleSort = sortDatas(sex, users);
console.log(singleSort('sex', 'single'));
var multiSort = sortDatas(hobby, person);
console.log(multiSort('hobby', 'multi'));
function sortDatas(sort, data) {
var cache = {};
return function (foreign_key, sortType) {
// 如果既不是单一归类或者复合归类
if (sortType !== 'single' && sortType !== 'multi') {
console.log(new Error('Invalid sort type.[Only "single" and "multi" are valid values]'));
return;
}
sort.forEach(function (sort) {
var _id = sort.id;
cache[_id] = [];
data.forEach(function (elem) {
var foreign_val = elem[foreign_key];
switch (sortType) {
case 'single':
if (foreign_val == _id) {
cache[_id].push(elem);
};
break;
case 'multi':
var _arr = foreign_val.split(',');
_arr.forEach(function (val) {
if (val === _id) {
cache[_id].push(elem);
}
});
break;
default:
break;
}
});
});
return cache;
}
}
实战课程归类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="courses-wrap">
<input type="text" id="js-search-input" placeholder="搜索课程">
<div class="course-tab">
<ul class="course-tab-list J_filterList clearfix" id="js-course-tab-list">
<li class="J_filterItem J_filterItem tab-item current" data-sort="7">
<a href="javascript:;" class="course-tab-lk" data-type="all">推荐课</a>
</li>
<li class="J_filterItem tab-item" data-sort="1">
<a href="javascript:;" class="course-tab-lk" data-type="free">基础课</a>
</li>
<li class="J_filterItem tab-item" data-sort="2">
<a href="javascript:;" class="course-tab-lk" data-type="pay">HTML/CSS</a>
</li>
<li class="J_filterItem tab-item" data-sort="3">
<a href="javascript:;" class="course-tab-lk" data-type="pay">JavaScript</a>
</li>
<li class="J_filterItem tab-item" data-sort="4">
<a href="javascript:;" class="course-tab-lk" data-type="pay">JS框架</a>
</li>
<li class="J_filterItem tab-item" data-sort="5">
<a href="javascript:;" class="course-tab-lk" data-type="pay">实战课</a>
</li>
<li class="J_filterItem tab-item" data-sort="6">
<a href="javascript:;" class="course-tab-lk" data-type="pay">系列课</a>
</li>
</ul>
</div>
<div class="course-card-list-wrap">
<ul class="course-card-list">
</ul>
</div>
</div>
<div id="J_data" style="display: none;">
{"course_data":[{"id":"1","field":"7,1,3","course_name":"\u524d\u7aef\u5f00\u53d1\u4e4bJavaScript\u6df1\u5ea6\u6307\u5357\u3010JS++\u524d\u7aef\u3011","img_url":"img\/javascript.jpg","link":"https:\/\/ke.qq.com\/course\/329070","is_vip":"0","price":"0","agency":"JS++\u524d\u7aef","recom":"1","status":"1"},{"id":"2","field":"1,2","course_name":"\u524d\u7aef\u5f00\u53d1\u4e4bHTML\/CSS\u7f51\u9875\u8bbe\u8ba1\u6307\u5357\u3010JS++\u524d\u7aef\u3011","img_url":"img\/htmlcss.jpg","link":"https:\/\/ke.qq.com\/course\/329071","is_vip":"0","price":"0","agency":"JS++\u524d\u7aef","recom":"0","status":"1"},{"id":"3","field":"7,2,5","course_name":"\u524d\u7aef\u5f00\u53d1\u4e4b\u4f01\u4e1a\u7ea7\u4eac\u4e1c\u5546\u57ceHTML\/CSS\u3010JS++\u524d\u7aef\u3011","img_url":"img\/jd.jpg","link":"https:\/\/ke.qq.com\/course\/329334","is_vip":"0","price":"0","agency":"JS++\u524d\u7aef","recom":"1","status":"1"},{"id":"4","field":"7,6","course_name":"WEB\u524d\u7aef\u5f00\u53d1\u9ad8\u7ea7\u5de5\u7a0b\u5e08\u5c31\u4e1a\u73ed\u3010JS++\u524d\u7aef\u3011","img_url":"img\/jiuyeban.jpg","link":"https:\/\/ke.qq.com\/course\/334138","is_vip":"1","price":"4980","agency":"JS++\u524d\u7aef","recom":"1","status":"1"},{"id":"5","field":"2,5","course_name":"\u524d\u7aef\u5c31\u4e1a\u73ed\u4e4b\u6dd8\u5b9d\u5546\u57ce-\u4f01\u4e1a\u7ea7\u7f51\u9875\u5b9e\u6218\u3010JS++\u524d\u7aef\u3011","img_url":"img\/taobao.jpg","link":"https:\/\/ke.qq.com\/course\/338135","is_vip":"1","price":"199","agency":"JS++\u524d\u7aef","recom":"0","status":"1"},{"id":"6","field":"7,3,5","course_name":"\u524d\u7aef\u5c31\u4e1a\u73ed\u4e4b\u6df1\u5ea6DOM\u57fa\u7840+\u8fdb\u9636+\u4f01\u4e1a\u7ea7\u9ad8\u7ea7\u5e94\u7528\u3010JS++\u524d\u7aef\u3011","img_url":"img\/dom.jpg","link":"https:\/\/ke.qq.com\/course\/334298","is_vip":"1","price":"599","agency":"JS++\u524d\u7aef","recom":"1","status":"1"},{"id":"7","field":"7,3,4,5","course_name":"\u524d\u7aef\u63d0\u5347\u73ed\u4e4b\u6df1\u5ea6ReactJS\u57fa\u7840+\u5b9e\u6218+redux\u6280\u672f\u3010JS++\u524d\u7aef\u3011","img_url":"img\/react.jpg","link":"https:\/\/ke.qq.com\/course\/357106","is_vip":"1","price":"499","agency":"JS++\u524d\u7aef","recom":"1","status":"1"},{"id":"8","field":"7,2,5","course_name":"\u524d\u7aef\u5c31\u4e1a\u73ed\u4e4b\u6df1\u5ea6Sass+Less\u57fa\u7840+\u8fdb\u9636+\u591a\u6848\u4f8b\u5e94\u7528\u3010JS++\u524d\u7aef\u3011","img_url":"img\/sass.jpg","link":"https:\/\/ke.qq.com\/course\/357114","is_vip":"1","price":"299","agency":"JS++\u524d\u7aef","recom":"1","status":"1"},{"id":"9","field":"7,3,4,5","course_name":"\u524d\u7aef\u63d0\u5347\u73ed\u4e4b\u6df1\u5ea6VueJS\u57fa\u7840+\u53bb\u54ea\u513f\u7f51\u5b9e\u6218+\u6e90\u7801\u89e3\u8bfb\u3010JS++\u524d\u7aef\u3011","img_url":"img\/vue.jpg","link":"https:\/\/ke.qq.com\/course\/357390","is_vip":"1","price":"699","agency":"JS++\u524d\u7aef","recom":"1","status":"1"},{"id":"10","field":"7,2,5","course_name":"\u524d\u7aef\u5c31\u4e1a\u73ed\u4e4b\u6df1\u5ea6CSS3\u57fa\u7840+\u8fdb\u9636+\u4f01\u4e1a\u7ea7\u9ad8\u7ea7\u5e94\u7528\u3010JS++\u524d\u7aef\u3011","img_url":"img\/css3.jpg","link":"https:\/\/ke.qq.com\/course\/357601","is_vip":"1","price":"499","agency":"JS++\u524d\u7aef","recom":"1","status":"1"},{"id":"11","field":"7,3,4,5","course_name":"\u524d\u7aef\u63d0\u5347\u73ed\u4e4b\u6df1\u5ea6Vue SSR\u4f01\u4e1a\u5fc5\u5907\u4e4bNuxtJS\u6280\u672f\u3010JS++\u524d\u7aef\u3011","img_url":"img\/nuxt.jpg","link":"https:\/\/ke.qq.com\/course\/357585","is_vip":"1","price":"299","agency":"JS++\u524d\u7aef","recom":"1","status":"1"},{"id":"12","field":"7,6","course_name":"WEB\u524d\u7aef\u5f00\u53d1\u9ad8\u7ea7\u5de5\u7a0b\u5e08\u63d0\u5347\u73ed\u3010JS++\u524d\u7aef\u3011","img_url":"img\/tishengban.jpg","link":"https:\/\/ke.qq.com\/course\/360156","is_vip":"1","price":"5880","agency":"JS++\u524d\u7aef","recom":"1","status":"1"}],"course_field":[{"id":"1","field":"basic","field_name":"\u57fa\u7840\u8bfe"},{"id":"2","field":"htmlcss","field_name":"HTML\/CSS"},{"id":"3","field":"js","field_name":"JavaScript"},{"id":"4","field":"framework","field_name":"JS\u6846\u67b6"},{"id":"5","field":"pactise","field_name":"\u5b9e\u6218\u8bfe"},{"id":"6","field":"series","field_name":"\u7cfb\u5217\u8bfe"},{"id":"7","field":"recom","field_name":"\u63a8\u8350\u8bfe"}]}
</div>
<script type="text/html" id="J_cardItemTpl">
<li class="card-item">
<a href="" class="img-lk">
<img src="{{img}}" alt="">
</a>
<div class="item-status">
<span class="item-status-text">随到随学</span>
</div>
<h4 class="item-tt">
<a href="" class="tt-lk">{{course}}</a>
</h4>
<div class="item-line">
<span class="item-price {{isFree}}">{{price}}</span>
<span class="item-info">{{agency}}</span>
</div>
</li>
</script>
<script type="text/javascript" src="./js/index.js">
</script>
</body>
</html>
* {
margin: 0;
box-sizing: border-box;
}
ul {
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
img {
width: 100%;
height: 100%;
}
h4 {
font-weight: normal;
}
.clearfix::after,
.clearfix::before {
content: "";
display: block;
clear: both;
}
.courses-wrap {
width: 1200px;
margin: 100px auto;
}
.course-tab {
height: 52px;
padding-left: 30px;
margin-bottom: 20px;
border: 1px solid #efefef;
background-color: #f5f5f5;
}
.course-tab .tab-item {
float: left;
height: 50px;
margin-right: 40px;
line-height: 50px;
}
.course-tab .tab-item.current > a{
color: #167ed9;
}
.course-card-list-wrap {
width: 1200px;
height: 500px;
}
.course-card-list-wrap .course-card-list {
width: 1235px;
height: 500px;
margin-left: -17px;
}
.course-card-list-wrap .course-card-list .course-list-tip {
height: 300px;
line-height: 300px;
text-align: center;
font-size: 30px;
color: #999;
}
.course-card-list-wrap .card-item {
float: left;
width: 236px;
height: 221px;
margin: 0 0 20px 9px;
padding: 7px 7px 10px 7px;
border: 1px solid transparent;
}
.course-card-list-wrap .card-item:hover {
border-color: #ddd;
box-shadow: 1px 1px 2px 1px #ececec;
}
.course-card-list-wrap .card-item .img-lk {
display: block;
width: 220px;
height: 124px;
margin-bottom: 6px;
}
.course-card-list-wrap .card-item .item-status {
position: relative;
z-index: 1;
height: 24px;
margin-top: -30px;
background-color: rgba(0, 0, 0, .5);
line-height: 24px;
color: #fff;
font-size: 12px;
}
.course-card-list-wrap .card-item .item-status .item-status-text {
margin-left: 2px;
}
.course-card-list-wrap .card-item .item-tt {
height: 40px;
margin: 3px 0 8px 0;
overflow: hidden;
}
.course-card-list-wrap .card-item .item-tt .tt-lk {
font-size: 14px;
}
.course-card-list-wrap .card-item .item-tt .tt-lk:hover {
color: #23b8ff;
}
.course-card-list-wrap .card-item .item-line {
height: 24px;
}
.course-card-list-wrap .card-item .item-line .item-price {
font-size: 14px;
}
.course-card-list-wrap .card-item .item-line .item-price.free {
color: #5fb41b;
}
.course-card-list-wrap .card-item .item-line .item-price.pay {
color: #e85308;
}
.course-card-list-wrap .card-item .item-line .item-info {
float: right;
margin-top: 2px;
font-size: 12px;
}
;(function (doc) {
var data = JSON.parse(doc.getElementById('J_data').innerHTML),
// 给归纳函数处理 返回需要的信息
sortData = sortDatas(data.course_field, data.course_data)('field', 'multi'),
oFilterList = doc.getElementsByClassName('J_filterList')[0],
oFilterItems = doc.getElementsByClassName('J_filterItem'),
oList = doc.getElementsByClassName('course-card-list')[0],
tpl = doc.getElementById('J_cardItemTpl').innerHTML,
oFilterItemsLen = oFilterItems.length;
var init = function () {
render(sortData, 7);
bindEvent();
}
function bindEvent() {
oFilterList.addEventListener('click', navClick, false);
}
function render(data, sort) {
var list = '',
sortData = data[sort];
sortData.forEach(function (course) {
list += tpl.replace(/{{(.*?)}}/g, function (node, key) {
return {
img: course.img_url,
course: course.course_name,
isFree: course.price === '0' ? 'free' : 'pay',
price: course.price === '0' ? '免费' : ("￥" + course.price),
agency: course.agency
} [key]
});
oList.innerHTML = list;
})
}
function navClick(e) {
var e = e || window.event,
tar = e.target || e.srcElement,
className = tar.className;
if (className === 'course-tab-lk') {
var oParent = tar.parentNode,
// 获取关键字
sort = oParent.getAttribute('data-sort'),
item;
for (var i = 0; i < oFilterItemsLen; i++) {
item = oFilterItems[i];
item.className = 'J_filterItem tab-item';
}
oParent.className += ' current';
// 获取并传参
render(sortData, sort);
}
}
function sortDatas(sort, data) {
var cache = {};
return function (foreign_key, sortType) {
// 如果既不是单一归类或者复合归类
if (sortType !== 'single' && sortType !== 'multi') {
console.log(new Error('Invalid sort type.[Only "single" and "multi" are valid values]'));
return;
}
sort.forEach(function (sort) {
var _id = sort.id;
cache[_id] = [];
data.forEach(function (elem) {
var foreign_val = elem[foreign_key];
switch (sortType) {
case 'single':
if (foreign_val == _id) {
cache[_id].push(elem);
};
break;
case 'multi':
var _arr = foreign_val.split(',');
_arr.forEach(function (val) {
if (val === _id) {
cache[_id].push(elem);
}
});
break;
default:
break;
}
});
});
return cache;
}
}
init();
})(document);
若有收获，就点个赞吧
0 人点赞
