~~~ 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> </a></li>`; } listBox.innerHTML = str; }(); //=>HANDLE CLICK ~function () { let sortList = function () { //=>this:當前操作的A let productAry = [].slice.call(productList); /* let _this=this; productAry.sort(function(a,b){ //this:window _this.flag });*/ productAry.sort((a, b) => { //=>this:當前操作的A let aP = a.getAttribute('data-price'), bP = b.getAttribute('data-price'); return (aP - bP) * this.flag; }); for (let i = 0; i < productAry.length; i++) { let curLi = productAry[i]; listBox.appendChild(curLi); } }; linkList[1].flag = -1; linkList[1].onclick = function () { //=>this:當前操作的A標簽(價格A標簽) this.flag *= -1;//=>每一次點擊可以讓FLAG的值從1~-1來回切換 (第一次點擊變為1,第二次變為-1...) sortList.call(this);//=>執行SORT-LIST，讓方法中的THIS關鍵字改為操作的A標簽 (箭頭函數雖然很強大， // 但是不可以亂用，尤其是在需要改變函數中THIS的情況下， // 箭頭函數中的THIS不受我們管控， // 都是默認繼承上下文中的，我們基于call也改不了) }; }(); ~~~