使用 isotope.js 在升序和降序之间进行排序切换答案

【问题标题】：Sorting toggle between ascending and descending using isotope.js使用 isotope.js 在升序和降序之间进行排序切换
【发布时间】：2015-08-27 22:39:50
【问题描述】：

我正在使用 isotope.js v 2.2.0，我可以分别按升序和降序排序，但似乎无法在一个按钮上切换 asc/desc。

HTML 代码：

<div id="sorts" class="btn-group">
  <button class="sort-btn sort-asc" data-sort-value="title" data-sort-direction="asc">Title Asc</button>
  <button class="sort-btn sort-desc" data-sort-value="title" data-sort-direction="desc">Title Desc</button>
</div>

我的脚本：

$('#sorts .sort-asc').on('click', 'button', function() { 
  var sortByValue = $(this).attr('data-sort-value'); 
  $container.isotope({sortBy: sortByValue, sortAscending: true}); 

  $this.removeClass('sort-asc').addClass('sort-desc');
});

//similar for ('#sorts .sort-asc')

一旦我添加了.sort-asc，排序就会停止工作。我不知道如何分隔 .sort-asc 和 .sort-desc 以便我可以添加/删除按钮的类以具有正确的行为。

任何建议都会有所帮助。

【问题讨论】：

标签： javascript jquery sorting jquery-isotope

【解决方案1】：

这个怎么样

var sortClass = $(this).hasClass('sort-asc');

$(this).toggleClass('sort-asc');

$container.isotope({ sortBy: sortValue, sortAscending: !sortClass  });

【讨论】：