使用數據屬性和JS對div進行排序

Question

我在5個月前提出了一個幾乎完全相同的問題，並得到了一個當時似乎有效的答案。 從那時起，我休息了一下，並沒有看到一行代碼。 現在我有一些空閑時間，我意識到我對Javascript很生疏。

鏈接到上一個問題： https ： //stackoverflow.com/questions/38470543/sort-divs-using-data-attributes-and-javascript

這是我目前的JSFiddle。 jsfiddle.net/wtckhkdq/3/

正如您所看到的，我有4個具有各種數據屬性的div，包括價格，列表日期和字母排名。 我試圖讓腳本工作，以便當按下每個按鈕時，它會根據引用的函數對div進行排序。 我的JSFiddle將無法正常運行，經過多次查看后我似乎無法找到錯誤。 在此之前，感謝所有人的新年快樂！

Answer 1

1. 您需要包含jquery庫才能使用它。
2. 在jsfiddle中，由於他們在最終輸出構建器中編寫的方式，js-scoping存在問題，因此html塊無法顯示您創建的函數。 你可以通過改變function sortDateNewOld (){到sortDateNewOld = function(){ jsfiddle里面來解決這個問題。

這是一個修復（一切正常）

 var divList = $(".listing"); function sortDateNewOld() { divList.sort(function(a, b){ return $(b).data("date")-$(a).data("date")}); $("#list").html(divList); } function sortDateOldNew(){ divList.sort(function(a, b){ return $(a).data("date")-$(b).data("date")}); $("#list").html(divList);} function sortPriceHighLow(){ divList.sort(function(a, b){ return $(b).data("price")-$(a).data("price")}); $("#list").html(divList);} function sortPriceLowHigh(){ divList.sort(function(a, b){ return $(a).data("price")-$(b).data("price")}); $("#list").html(divList);} function sortAlphAZ(){ divList.sort(function(a, b){ return $(a).data("alph")-$(b).data("alph")}); $("#list").html(divList);} function sortAlphZA(){ divList.sort(function(a, b){ return $(b).data("alph")-$(a).data("alph")}); $("#list").html(divList);} 

 .button { font-size: 15px; width: 120px; height: 30px; background-color: white; display: inline-block; cursor: pointer;} .listing { width: 342px; height: 282px; border-radius: 7px; background-color: #f1f1f1; margin: auto; margin-top: 80px; position: relative; box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.15);} .listinginfo { width: 342px; height: 64px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; background-color: white; position: absolute; bottom: 0; left: 0; box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.05); font-size: 10px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button" onclick="sortDateNewOld()">Date New-Old</button> <button class="button" onclick="sortDateOldNew()">Date Old-New</button> <button class="button" onclick="sortAlphAZ()">Name AZ</button> <button class="button" onclick="sortAlphZA()">Name ZA</button> <button class="button" onclick="sortPriceHighLow()">Price High-Low</button> <button class="button" onclick="sortPriceLowHigh()">Price Low-High</button> <div id="list"> <!-------------------------------------------------------------> <div class="listing" data-price="99" data-date="20171201" data-alph="010101" style="background-image: url()"> <div class="listinginfo"> AAA<br> Price: $99<br> Date: December 1, 2017 </div> </div> <!-------------------------------------------------------------> <!-------------------------------------------------------------> <div class="listing" data-price="199" data-date="20171202" data-alph="010102" style="background-image: url()"> <div class="listinginfo"> AAB<br> Price: $199<br> Date: December 2, 2017 </div> </div> <!-------------------------------------------------------------> <!-------------------------------------------------------------> <div class="listing" data-price="299" data-date="20171203" data-alph="010103" style="background-image: url()"> <div class="listinginfo"> AAC<br> Price: $299<br> Date: December 3, 2017 </div> </div> <!-------------------------------------------------------------> <!-------------------------------------------------------------> <div class="listing" data-price="399" data-date="20171204" data-alph="010104" style="background-image: url()"> <div class="listinginfo"> AAD<br> Price: $399<br> Date: December 4, 2017 </div> </div> <!-------------------------------------------------------------> </div>