List.js多個排序按鈕而不是一個

Question

我想爲每個排序函數創建兩個按鈕，一個按升序排序，另一個按降序排序。目前，每個按鈕都執行兩項任務，用戶必須重新點擊該按鈕才能執行其他排序功能。如何將這些操作分爲兩個單獨的函數/按鈕，以便按升序排序，另一個按降序排序？

$(function() { 
 
    var options = {valueNames: ['name', 'date', 'difficulty']}; 
 
    var userList = new List('search-results', options); 
 

 
    //sort 
 
    userList.on("updated", function() { 
 
    $('.sort').each(function() { 
 
     if ($(this).hasClass("asc")) { 
 
     $(this).find(".fa").addClass("fa-sort-asc").removeClass("fa-sort-desc").show(); 
 
     } else if ($(this).hasClass("desc")) { 
 
     $(this).find(".fa").addClass("fa-sort-desc").removeClass("fa-sort-asc").show(); 
 
     } else { 
 
     $(this).find(".fa").hide(); 
 
     } 
 
    }) 
 
    }) 
 

 
});

.package { 
 
    border: 1px solid #ccc; 
 
    margin: 10px; 
 
    padding: 10px; 
 
}

<div class="row"> 
 
    <div id="search-results"> 
 
    Sort by: 
 
    <button class="sort btn" data-sort="name"> 
 
     Name <i class="fa fa-fw"></i> 
 
    </button> 
 
    <button class="sort btn" data-sort="date"> 
 
     Departures <i class="fa fa-fw"></i> 
 
    </button> 
 
    <button class="sort btn" data-sort="difficulty"> 
 
     Difficulty <i class="fa fa-fw"></i> 
 
    </button> 
 

 

 
    <div class="list"> 
 
     <div class="package"> 
 
     <span class="name">Northern Lights</span> 
 
     <br /> 
 
     <span class="date"><strong>5 departures available</strong></span> 
 
     <br /> 
 
     <span class="difficulty">Easy</span> 
 
     </div> 
 
     <div class="package"> 
 
     <span class="name">Blue Lagoon swim</span> 
 
     <br /> 
 
     <span class="date"><strong>15 departures available</strong></span> 
 
     <br /> 
 
     <span class="difficulty">Moderate</span> 
 
     </div> 
 
     <div class="package"> 
 
     <span class="name">Hiking up mountain</span> 
 
     <br /> 
 
     <span class="date"><strong>8 departures available</strong></span> 
 
     <br /> 
 
     <span class="difficulty">Challenging</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.0/list.min.js"></script>

Answer 1

只需將屬性添加到你的按鈕：

數據階= 「ASC」 或數據階= 「desc」 的

$(function() { 
 
    var options = {valueNames: ['name', 'date', 'difficulty']}; 
 
    var userList = new List('search-results', options); 
 

 

 

 
});

.package { 
 
    border: 1px solid #ccc; 
 
    margin: 10px; 
 
    padding: 10px; 
 
}

<div class="row"> 
 
    <div id="search-results"> 
 
    Sort by: 
 
    <button class="sort btn" data-sort="name" data-order="asc"> 
 
     Name ↑ 
 
    </button> 
 
    <button class="sort btn" data-sort="name" data-order="desc"> 
 
     Name ↓ 
 
    </button> 
 
    <button class="sort btn" data-sort="date" data-order="asc"> 
 
     Departures ↑ 
 
    </button> 
 
    <button class="sort btn" data-sort="date" data-order="desc"> 
 
     Departures ↓ 
 
    </button> 
 
    <button class="sort btn" data-sort="difficulty" data-order="asc"> 
 
     Difficulty ↑ 
 
    </button> 
 
    <button class="sort btn" data-sort="difficulty" data-order="desc"> 
 
     Difficulty ↓ 
 
    </button> 
 

 

 
    <div class="list"> 
 
     <div class="package"> 
 
     <span class="name">Northern Lights</span> 
 
     <br /> 
 
     <span class="date"><strong>5 departures available</strong></span> 
 
     <br /> 
 
     <span class="difficulty">Easy</span> 
 
     </div> 
 
     <div class="package"> 
 
     <span class="name">Blue Lagoon swim</span> 
 
     <br /> 
 
     <span class="date"><strong>15 departures available</strong></span> 
 
     <br /> 
 
     <span class="difficulty">Moderate</span> 
 
     </div> 
 
     <div class="package"> 
 
     <span class="name">Hiking up mountain</span> 
 
     <br /> 
 
     <span class="date"><strong>8 departures available</strong></span> 
 
     <br /> 
 
     <span class="difficulty">Challenging</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.0/list.min.js"></script>