Question

我有以下简单的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中排序（恢复正常）。我再次点击 - 重复该过程等等。

Answer 1

您可以使用计数器

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();
});

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

1 个答案: