~~~ let listBox = document.getElementById('list'), headerBox = document.getElementById('header'), linkList = headerBox.getElementsByTagName('a'), productList = listBox.getElementsByTagName('li'); ~function () { //=>AJAX let productData = null, xhr = new XMLHttpRequest; xhr.open('GET', 'json/product.json', false); xhr.onreadystatechange = () => { xhr.readyState === 4 && xhr.status === 200 ? productData = xhr.responseText : null; //->FORMAT DATA productData ? productData = JSON.parse(productData) : null; }; xhr.send(null); //=>BIND DATA let str = ``; for (let i = 0; i < productData.length; i++) { let { title, img, price, time, hot } = productData[i]; str += `<li data-price="${price}" data-time="${time}" data-hot="${hot}"> <a href="javascript:;"> <img src="${img}" alt=""> <p>${title}</p> <span>￥${price}</span><br/> <span>時間：${time}</span><br/> <span>熱度：${hot}</span> </a></li>`; } listBox.innerHTML = str; }(); //=>HANDLE CLICK ~function () { let sortList = function () { //=>this:點擊的A標簽 let productAry = [].slice.call(productList); productAry.sort((a, b) => { //=>需要獲取當前點擊A的索引,通過索引不同,按照不同的方式進行排序 let aInn, bInn; switch (this.index) { case 0: //=>日期不能直接的相減，需要把字符串中的“-”去掉在相減 aInn = a.getAttribute('data-time').replace(/-/g, ''); bInn = b.getAttribute('data-time').replace(/-/g, ''); break; case 1: aInn = a.getAttribute('data-price'); bInn = b.getAttribute('data-price'); break; case 2: aInn = a.getAttribute('data-hot'); bInn = b.getAttribute('data-hot'); break; } return (aInn - bInn) * this.flag; }); for (let i = 0; i < productAry.length; i++) { let curLi = productAry[i]; listBox.appendChild(curLi); } }; //=>給每一個LINK都綁定點擊切換 for (let i = 0; i < linkList.length; i++) { let curLink = linkList[i]; curLink.index = i;//=>設置自定義屬性存儲A的索引 curLink.flag = -1;//=>每一個A標簽上都有一個FLAG， 能夠在點擊的時候實現1~-1之間的切換,點擊都要執行SORT-LIST， 同時方法中的THIS也都改為當前點擊的A curLink.onclick = function () { this.flag *= -1; sortList.call(this); }; } }(); ~~~