[英]Sort divs using data attributes and JS
I asked an almost identical question about 5 months ago and got a great answer that seemed to work at the time. 我在5个月前提出了一个几乎完全相同的问题,并得到了一个当时似乎有效的答案。 Since then I have taken a break and have not looked at so much as a line of code.
从那时起,我休息了一下,并没有看到一行代码。 Now that I have some free time, I am realizing I am quite rusty with Javascript.
现在我有一些空闲时间,我意识到我对Javascript很生疏。
Link to previous question: https://stackoverflow.com/questions/38470543/sort-divs-using-data-attributes-and-javascript 链接到上一个问题: https : //stackoverflow.com/questions/38470543/sort-divs-using-data-attributes-and-javascript
This is my current JSFiddle. 这是我目前的JSFiddle。 jsfiddle.net/wtckhkdq/3/
jsfiddle.net/wtckhkdq/3/
As you can see I have 4 divs with a variety of data attributes including price, date of listing, and alphabetical rank. 正如您所看到的,我有4个具有各种数据属性的div,包括价格,列表日期和字母排名。 I am trying to get the script working so that when each button is pressed, it sorts the divs according to the referenced function.
我试图让脚本工作,以便当按下每个按钮时,它会根据引用的函数对div进行排序。 My JSFiddle will not run properly and after looking it over multiple times I can't seem to find what's wrong.
我的JSFiddle将无法正常运行,经过多次查看后我似乎无法找到错误。 Thanks in advance and happy new years to all!
在此之前,感谢所有人的新年快乐!
jquery
library to use it. jquery
库才能使用它。 function sortDateNewOld (){
to sortDateNewOld = function(){
inside jsfiddle. function sortDateNewOld (){
到sortDateNewOld = function(){
jsfiddle里面来解决这个问题。 Here is a fix (and everything work) 这是一个修复(一切正常)
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.