使用数据属性和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>