jQuery单击排序并重置无法正常工作

jQuery click sort and reset not working properly

本文关键字：常工作 工作 排序 单击 jQuery      更新时间：2023-09-26

我有以下简单的HTML标记： 

<div class="sorter">
    <i class="fa fa-sort"></i>
</div>
<div class="market-slider">
    <div class="market-search">
        <div class="market-inner-item" data-position="1"> .. </div>
        <div class="market-inner-item" data-position="2"> .. </div>
        <div class="market-inner-item" data-position="3"> .. </div>
        <div class="market-inner-item" data-position="4"> .. </div>
    </div>
</div>

这是我的jQuery： 

$('.sorter i.fa-sort').click(function(e) {
    $(".market-slider .market-inner-item").sort(sort_li).appendTo('.market-slider');
    function sort_li(a, b){
        return ($(b).data('position')) > ($(a).data('position')) ? 1 : -1;
    }
    e.preventDefault();
});

问题：它有效。它使用 HTML5 数据属性(例如 data-position="4"(来确定div 的顺序。我希望能够单击排序按钮并让结果排序或以相反的顺序显示。

简单的英语：我点击 - 它按降序排序(。我再次单击-它以ASC排序(恢复正常(。我再次单击-该过程重复，依此类推。

您可以使用计数器

var elm = $('.sorter i.fa-sort');
elm.data("what", "sort")
elm.click(function(e) {
    if (elm.data("what") == "sort") {
        $(".market-slider .market-inner-item").sort(sort_li).appendTo('.market-slider');
        $(this).data("what", "reverse");
    } else {
        $(".market-slider .market-inner-item").sort(sort_li).reverse().appendTo('.market-slider');
        $(this).data("what", "sort");
    }
    function sort_li(a, b) {
        return ($(b).data('position')) > ($(a).data('position')) ? 1 : -1;
    }
    e.preventDefault();
});
相关文章：