html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="content">
<div class="header">
<span>排序</span>
<a href="javascript:;">
上架时间
<i class="up"></i>
<i class="down"></i>
</a>
<a href="javascript:;">
热度
<i class="up"></i>
<i class="down"></i>
</a>
<a href="javascript:;">
价格
<i class="up"></i>
<i class="down"></i>
</a>
</div>
<ul id="cardBox">
</ul>
</div>
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
css
html,body {
width: 100%;
height: 100%;
background: #f4f4f4;
}
#content .header {
width: 1200px;
margin: 30px auto;
background: rgba(255, 68, 0, 0.603);
height: 40px;
line-height: 40px;
font-size: 16px;
padding: 5px;
color: white;
}
#content .header span {
margin-right: 10px;
color: black;
}
#content .header a {
color: white;
position: relative;
margin-right: 20px;
}
#content .header a:hover {
color: orangered;
}
#content .header a i {
width: 0;
height: 0;
border: 4px solid transparent;
position: absolute;
}
#content .header a i.up {
top:3px;
border-bottom:4px solid white
}
#content .header a i.up.bg {
border-bottom:4px solid orangered
}
#content .header a i.down {
top:14px;
border-top:4px solid white
}
#content .header a i.down.bg {
border-top:4px solid orangered
}
#cardBox {
width: 1200px;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
}
#cardBox li {
width: 24%;
margin: 10px 0.5%;
box-sizing: border-box;
padding: 10px;
background: white;
box-shadow: 8px 8px 5px #8888889f
}
#cardBox li img {
width: 80%;
display: block;
margin: 0 auto;
transition: all 0.2S;
cursor: pointer;
opacity: .8;
}
#cardBox li img:hover {
transform: scale(1.05);
opacity: 1;
}
#cardBox li span {
display: block;
font-size: 16px;
margin: 4px 2px;
color: orangered;
text-shadow: 1px 1px 5px #88888880
}
js
(function () {
/*
第一步：从服务器获取数据，然后渲染到页面上
1、创建一个变量，准备接收请求来的数据
2、利用ajax请求数据，然后把数据放到一个变量中
1、创建一个ajax实例
2、打开一个请求连接，基于get请求同步完成
3、监听服务器返回的信息状态，如果状态是200，而且状态码是4，证明数据请求成功
4、发送ajax请求
3、把请求来的数据赋值给变量接收
*/
let data = null;
let $cardBox = $("#cardBox");
let xhr = new XMLHttpRequest;
xhr.open("get", "json/product.json", false);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
data = JSON.parse(xhr.responseText);
// console.log(data);
}
}
xhr.send();
renderHTML();
function renderHTML() {
let htmlStr = "";
$.each(data, function (index, item) {
let {
hot,
price,
time,
img
} = item;
htmlStr += `<li data-hot="${hot}" data-price="${price}" data-time="${time}">
<img src="${img}" alt="">
<span>上架时间：${time}</span>
<span>热度：${hot}</span>
<span>价格：${price}</span>
</li>`;
// console.log(htmlStr);
})
// console.log($cardBox);
$cardBox.html(htmlStr);
}
let $header = $(".header");
let $navList = $header.find("a");
let $cardList = $("li");
$cardList = utils.toArray($cardList);
// console.log($navList, $cardList);
/*
第二步：点击相应的按钮进行按照时间、热度、价格进行排序
1、向操作谁就获取谁
2、给相应的元素绑定相应的事件
3、在事件里做你想做的事
*/
for (let i = 0; i < $navList.length; i++) {
$navList.eq(i).attr('flag', -1);
// console.log($navList.eq(i).attr('flag'));
$navList.eq(i).attr('index', i);
// console.log($navList.eq(i).attr('index'));
$navList.eq(i).click(function () {
// console.log($(this));
$(this).attr('flag', `${ $(this).attr('flag') *(-1)}`);
// console.log($(this).attr('flag'));
sortList.call($(this));
clearArrow.call($(this));
addArrow.call($(this));
})
}
function sortList() {
// console.log($(this));
$cardList.sort((a, b) => {
// console.log($(this).attr('index'));
let ary = ["data-time", "data-hot", "data-price"];
// console.log(a.getAttribute(ary[$(this).attr('index')]));
a = a.getAttribute(ary[$(this).attr('index')]);
b = b.getAttribute(ary[$(this).attr('index')]);
if ($(this).attr('index') == 0) {
a = a.replace(/-/g, "");
b = b.replace(/-/g, "");
}
// console.log(a);
console.log($(this).attr('flag'));
return (a - b) * $(this).attr('flag');
})
for (let i = 0; i < $cardList.length; i++) {
$cardBox.append($cardList[i]);
}
}
function clearArrow() {
$(this).attr("remember", $(this).attr("flag"));
for (let i = 0; i < $navList.length; i++) {
$navList.eq(i).find("i").eq(0).removeClass("bg");
$navList.eq(i).find("i").eq(1).removeClass("bg");
$navList.eq(i).attr("flag", -1);
}
$(this).attr("flag", $(this).attr("remember"));
}
function addArrow() {
let $up = $(this).find("i").eq(0);
let $down = $(this).find("i").eq(1);
if ($(this).attr("flag") > 0) {
$up.addClass("bg");
$down.removeClass("bg");
} else {
$down.addClass("bg");
$up.removeClass("bg");
}
}
})()
