[英]Sorting toggle between ascending and descending using isotope.js
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. 我正在使用isotope.js v 2.2.0,我可以分别按升序和降序进行排序,但是似乎无法在一个按钮正常工作的情况下在asc / desc之间进行切换。
HTML code: 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>
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. 一旦我添加了.sort-asc
,排序就会停止工作。 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. 我不确定如何分隔.sort-asc
和.sort-desc
以便为按钮添加/删除类以使其具有正确的行为。
Any suggestions would help. 任何建议都会有所帮助。
How about this 这个怎么样
var sortClass = $(this).hasClass('sort-asc');
$(this).toggleClass('sort-asc');
$container.isotope({ sortBy: sortValue, sortAscending: !sortClass });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.