<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="wrap">
<div class="nav">
<a href="javascript:;">從小到大</a>
<a href="javascript:;">打亂順序</a>
</div>
<ul>
<!-- <li>
<img src="images/8.png" alt="">
<p>8-指尖社區</p>
</li>
<li>
<img src="images/1.png" alt="">
<p>1-溫馨辦公</p>
</li>
<li>
<img src="images/2.png" alt="">
<p>2-遊戲桌面</p>
</li>
<li>
<img src="images/3.png" alt="">
<p>3-汽車搖滾</p>
</li>
<li>
<img src="images/4.png" alt="">
<p>4-狹路相逢</p>
</li>
<li>
<img src="images/5.png" alt="">
<p>5-棒球小子</p>
</li>
<li>
<img src="images/6.png" alt="">
<p>6-球鞋動力</p>
</li>
<li>
<img src="images/7.png" alt="">
<p>7-遊戲官網</p>
</li> -->
</ul>
</div>
<script type="text/javascript">
var data = [
{
txt: "1-溫馨辦公",
img: "images/1.png"
},{
txt: "2-遊戲桌面",
img: "images/2.png"
},{
txt: "3-汽車搖滾",
img: "images/3.png"
},{
txt: "4-狹路相逢",
img: "images/4.png"
},{
txt: "5-棒球小子",
img: "images/5.png"
},{
txt: "6-球鞋動力",
img: "images/6.png"
},{
txt: "7-遊戲官網",
img: "images/7.png"
},{
txt: "8-指尖社區",
img: "images/8.png"
}
];
function $(cssSelector,parent){
parent = parent||document; // 給 parent 設置了一個默認值是document
var els = parent.querySelectorAll(cssSelector);
return els.length > 1?els:els[0];
};
(function(){
var btns = $(".nav a");
var list = $(".wrap ul");
var isList = true;// 從小到大排序
btns[0].onclick = function(){
// isList true 從 大到小 false 從小到大
this.innerHTML = isList ?"從大到小":"從小到大";
data.sort(function(n1,n2){
n1 = parseInt(n1.txt);
n2 = parseInt(n2.txt);
return isList ?n2 - n1:n1-n2;
});
isList = !isList;
render();
};
btns[1].onclick = function(){
data.sort(function(){
return Math.random() - .5;
});
render();
};
//數據驅動視圖: 所有的功能操作，都是操作數據進行改變, 修改完數據之後，在根據數據同步視圖
render();
// 根據數據把結構渲染出來
function render(){
/*list.innerHTML = data.map(function(item){
return '<li><img src="'+item.img+'" alt=""><p>'+item.txt+'</p></li>';
}).join("");*/
list.innerHTML = data.reduce(function(item,item2){
return item + '<li><img src="'+item2.img+'" alt=""><p>'+item2.txt+'</p></li>';
},"");
}
})();
</script>
</body>
</html>