Sorting toggle between ascending and descending using isotope.js

Question

I'm using isotope.js v 2.2.0, I can sort by ascending and descending respectively but can't seem to get the toggle between asc/desc on one button working.

HTML code:

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

My script:

$('#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')

Once I added in .sort-asc the sort stops working. I'm not sure how to separate the .sort-asc and .sort-desc so that I could add/remove class for the button to have the correct behavior.

Any suggestions would help.

Answer 1

How about this

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

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

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