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

只需在按钮中添加一个属性：

数据阶=＆＃34; ASC＆＃34;或数据顺序=＆＃34; desc＆＃34;

＆＃13;

＆＃13;

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



});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;