jquery - 在 jQuery 中对列表进行排序无法正常工作

Question

我在 jQuery 中根据我的数据属性创建了 4 种排序方式。但是当我单击排序选项时，它总是按字母顺序从 A-Z 排序一次。当我再次单击排序时，它不会执行任何操作。

当我执行控制台日志以查看单击了哪个项目时，我得到以下结果:

za
az

或

1-10
za
az

所以最后总是从 A-Z 排序。但说实话，我不知道为什么。

这是我的 HTML 示例:

<div class="sort">
    <span class="sort__item" id="js-az">A-Z</span>
    <span class="sort__item" id="js-za">Z-A</span>
    <span class="sort__item" id="js-1-10">1-10</span>
    <span class="sort__item" id="js-10-1">10-1</span>
</div>

<div class="row js-songs-sortable" id="all-song-list">
    <div class="col-md-4 col-sm-12" data-count="5" data-name="Strange Days">
        content
    </div>
    <div class="col-md-4 col-sm-12" data-count="1" data-name="Rock Bottom">
        content
    </div>
    <div class="col-md-4 col-sm-12" data-count="1" data-name="Moutain">
        content
    </div>
    <div class="col-md-4 col-sm-12" data-count="3" data-name="Mad Sun">
        content
    </div>
    <div class="col-md-4 col-sm-12" data-count="10" data-name="Another Ugly Tune">
        content
    </div>
</div>

这是我的 jQuery 代码:

jQuery('body').on('click', '.sort #js-az', function(){
    jQuery(".js-songs-sortable > div").sort(sort_li).appendTo('.js-songs-sortable');

    function sort_li(a,b){
        return (jQuery(b).data('name')) < (jQuery(a).data('name')) ? 1 : -1;    
    }
});

jQuery('body').on('click', '.sort #js-za', function(){
    jQuery(".js-songs-sortable > div").sort(sort_li).appendTo('.js-songs-sortable');

    function sort_li(b,a){
        return (jQuery(b).data('name')) < (jQuery(a).data('name')) ? 1 : -1;    
    }
});

jQuery('body').on('click', '.sort #js-1-10', function(){
    jQuery(".js-songs-sortable > div").sort(sort_li).appendTo('.js-songs-sortable');

    function sort_li(a,b){
        return (jQuery(b).data('count')) < (jQuery(a).data('count')) ? 1 : -1;    
    }
});

jQuery('body').on('click', '.sort #js-10-1', function(){
    jQuery(".js-songs-sortable > div").sort(sort_li).appendTo('.js-songs-sortable');

    function sort_li(b,a){
        return (jQuery(b).data('count')) < (jQuery(a).data('count')) ? 1 : -1;    
    }
});

您可以在此处找到实时预览: https://mpdb.space/mp-songs/

Answer 1

据记录here默认情况下，sort() 方法将值作为字符串按字母顺序和升序排序。但是，您可以通过传递比较函数来修改其行为。您尚未指定想要实现的结果，因此您必须创建一个具有所需排序逻辑的函数。