对我的列表进行排序不需要'；无法在jQuery中正常工作

我已经在jQuery中对我的数据属性创建了一个4向排序。但当我点击排序选项时，它总是按字母顺序从a-Z排序一次。当我再次单击排序时，它什么也不做

当我记录控制台日志以查看单击哪个项目时，会得到以下结果：

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>

A-Z
Z-A
1-10
10-1
内容
内容
内容
内容
内容

这是我的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;    
    }
});

jQuery（'body'）。在（'click'，'上。排序#js az'，函数（）{
jQuery（“.js songs sortable>div”）.sort（sort_li）.appendTo（'.js songs sortable'）；
函数排序（a，b）{
返回（jQuery（b）.data（'name'））<（jQuery（a）.data（'name'））？1:-1；
}
});
jQuery（'body'）。在（'click'，'上。排序#js za'，函数（）{
jQuery（“.js songs sortable>div”）.sort（sort_li）.appendTo（'.js songs sortable'）；
函数排序（b，a）{
返回（jQuery（b）.data（'name'））<（jQuery（a）.data（'name'））？1:-1；
}
});
jQuery（'body'）。在（'click'，'上。排序#js-1-10'，函数（）{
jQuery（“.js songs sortable>div”）.sort（sort_li）.appendTo（'.js songs sortable'）；
函数排序（a，b）{
返回（jQuery（b）.data（'count'））<（jQuery（a）.data（'count'））？1:-1；
}
});
jQuery（'body'）。在（'click'，'上。排序#js-10-1'，函数（）{
jQuery（“.js songs sortable>div”）.sort（sort_li）.appendTo（'.js songs sortable'）；
函数排序（b，a）{
返回（jQuery（b）.data（'count'））<（jQuery（a）.data（'count'））？1:-1；
}
});

您可以在此处找到实时预览：

---

如文件所述，默认情况下，

sort（）

方法按字母顺序和升序将值作为字符串进行排序。但是，您可以通过传递比较函数来修改其行为。您尚未指定要实现的结果，因此必须创建具有所需排序逻辑的函数。

数据属性始终返回字符串（顺便说一句，输入字段也是常见错误），比较结果与数字比较不同：

console.log（“9”>“111”）//true
console.log（“310”>“31”）//true

您的代码的问题是您正在使用

.data

，而您需要使用

.attr（）

jQuery（'body'）。在（'click'，'上。排序#js az'，函数（）{
jQuery（“.js songs sortable>div”）.sort（sort_li）.appendTo（'.js songs sortable'）；
函数排序（a，b）{
return（jQuery（b）.attr（'data-name'））<（jQuery（a）.attr（'data-name'））？1:-1；
}
});
jQuery（'body'）。在（'click'，'上。排序#js za'，函数（）{
jQuery（“.js songs sortable>div”）.sort（sort_li）.appendTo（'.js songs sortable'）；
函数排序（b，a）{
return（jQuery（b）.attr（'data-name'））<（jQuery（a）.attr（'data-name'））？1:-1；
}
});
jQuery（'body'）。在（'click'，'上。排序#js-1-10'，函数（）{
jQuery（“.js songs sortable>div”）.sort（sort_li）.appendTo（'.js songs sortable'）；
函数排序（a，b）{
返回（parseInt（jQuery（b）.attr（'data-count'））div”）.sort（sort_li）.appendTo（'.js songs sortable'）；
函数排序（b，a）{
返回parseInt（jQuery（b）.attr（'data-count'））
.sort{
边界半径：5px；
背景色：#eee；
显示：内联块；
边缘底部：1rem；
}
.排序范围{
填充：1rem；
光标：指针；
过渡：均为0.3秒；
显示：内联块；
}
.排序范围：悬停{
背景色：rgba（0,0,0,0.1）；
}
.行>分区{
填充：0.5雷姆；
}
.row>div:：after{
内容：“数据计数=“属性（数据计数）”数据名称=“属性（数据名称）；
}

A-Z
Z-A
1-10
10-1
但问题是，当我将代码粘贴到控制台窗口时，它的工作方式很奇怪。。尝试修复span关闭标记，看看是否有帮助请注意，您已使用
，
A-Z
关闭了
。。。修复这个问题，它就会工作。哦，不，我的代码中的复制粘贴是错误的。最后的跨度在我的代码中看看这把小提琴，这不是你想要的东西你的小提琴确实能工作，但不是在我的项目中。请看现场预览：我也在我的网站上测试了你的小提琴，但没有效果。但是它可以在jsfiddle.net站点上运行。这会产生与当前直播完全相同的结果。请检查mpdb.space/mp songs/@Dennis Markup！）您有
a-z-a 1-10
，必须是
a-z-a 1-10
；在这种情况下，它工作正常（在您的网站上测试）。另外，如果error
$不是一个函数
，您可以将所有代码包装到另一个函数
（函数（$）{/*自由使用$*/}）（jQuery）-它是自动执行的，并创建一个本地
$
变量作为
jQuery
谢谢！打字错误是问题之一。我还将.data（'name'）更改为.attr（'data-name'）。一切都按它应该的样子运行。非常感谢您将data（'name'）更改为.attr（'data-name'）成功。当然，还有输入错误
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;    
    }
});