I asked an almost identical question about 5 months ago and got a great answer that seemed to work at the time. 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.
Link to previous question: https://stackoverflow.com/questions/38470543/sort-divs-using-data-attributes-and-javascript
This is my current JSFiddle. 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. I am trying to get the script working so that when each button is pressed, it sorts the divs according to the referenced function. My JSFiddle will not run properly and after looking it over multiple times I can't seem to find what's wrong. Thanks in advance and happy new years to all!
jquery
library to use it. function sortDateNewOld (){
to sortDateNewOld = function(){
inside 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.