List.js mehrere Sortierschaltflächen statt einer

Question

Ich möchte zwei Schaltflächen für jede Sortierfunktion erstellen, eine, die aufsteigend sortiert, und eine, die in absteigender Reihenfolge sortiert. Derzeit führt jede Schaltfläche beide Aufgaben aus, und ein Benutzer muss erneut auf die Schaltfläche klicken, um die andere Sortierfunktion auszuführen. Wie teile ich diese Aktionen in zwei separate Funktionen/Schaltflächen auf, so dass man einfach nach aufsteigender und nach absteigender Reihenfolge sortiert?

$(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

einfach ein Attribut, um Ihre Schaltflächen hinzufügen:

Daten-order = "asc" oder Daten-order = "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>