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

您需要包含jquery库才能使用它。
在jsfiddle中，由于他们在最终输出构建器中编写的方式，js-scoping存在问题，因此html块无法显示您创建的函数。您可以通过将jsfiddle中的function sortDateNewOld (){更改为sortDateNewOld = function(){来明确解决此问题。

这是一个修复（一切正常）

＆＃13;

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);}

＆＃13;

.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;}

＆＃13;

<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 A-Z</button>
    <button class="button" onclick="sortAlphZA()">Name Z-A</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>

＆＃13;

使用数据属性和JS对div进行排序

1 个答案: