Question

当然问题不在于功能，但是如下面的代码所示，您需要单击两次以降序〜增长对其进行排序。我该如何解决这个问题？

我相信这个错误：

function lxp(a, b){
    var adate = new Date($(a).attr("data-date"));
    var bdate = new Date($(b).attr("data-date"));
    if(tipo == 'acrescente'){
        return adate > bdate ? -1 : 1;
    }else if(tipo == 'decrescente'){
        return adate > bdate ? 1 : -1;
    }
}

Answer 1

这对我来说似乎是最直接的方法：

http://jsfiddle.net/3T5kN/11/

$(function(){
    var tllp = 15;
    $('#blocoSite li').each(function(i, lep){
        $(lep).css({ top : tllp });
        tllp += 15;
    });
});

$(document).ready(function() {

    var tipo = "decrescente";
    $('#ordeData').click(function() { 
        tipo = tipo == "acrescente" ? "decrescente" : "acrescente"
        var nposY = 0;

        function lxp(a, b){
            var adate = new Date($(a).attr("data-date"));
            var bdate = new Date($(b).attr("data-date"));

            if(tipo == 'acrescente'){
                return adate > bdate ? -1 : 1;
            }else if(tipo == 'decrescente'){
                return adate < bdate ? -1 : 1;
            }
        }

        $("#blocoSite li").sort(lxp).each(function(i, el){
            nposY = i * 15;

            $(this).animate({
                left: 200,
                top :  nposY
            }, 800);
        });

    })
})

随附HTML

<ul id="blocoSite">
    <li data-date="2010-05-12">2010</li>
    <li data-date="2012-05-12">2012</li>
    <li data-date="2015-05-12">2015</li>
    <li data-date="2008-05-12">2008</li>
    <li data-date="2009-05-12">2009</li>
    <li data-date="2010-05-12">2010</li>
</ul>
<button id="ordeData">CLICK</button>

Answer 2

尝试在小于10的月份添加0，例如<li data-date="2010-05-12">而不是<li data-date="2010-5-12">

我在你的小提琴中做了这个，列表在第一次点击时排序

编辑：更新小提琴（http://jsfiddle.net/3T5kN/8/）

我明白了。这不行吗？

2015
2012
2010
2010
2009
2008

Answer 3

我收到来自adate和bdate的“无效日期”错误，因此我将您的日期字符串转换为数字（使用parseInt）并且它有效。

http://jsfiddle.net/3T5kN/7/

Answer 4

将javascriptcode替换为：

$(function(){
    var tllp = 15;
    $('#blocoSite li').each(function(i, lep){
        $(lep).css({ top : tllp });
        tllp += 15;
    });
});

function orderDate(tipo){
    $('#ordered').remove();
    var nposX = 0;
    var nposY = 0;

    if(tipo == 'acrescente'){
        $("#ordeData").attr({'onclick' : 'orderDate("decrescente");'});
    }else if(tipo == 'decrescente'){
        $("#ordeData").attr({'onclick' : 'orderDate("acrescente");'});
    }


    function lxp(a, b){
        var adate = new Date($(a).attr("data-date"));
        var bdate = new Date($(b).attr("data-date"));
        if(tipo == 'acrescente'){
            return adate > bdate ? -1 : 1;
        }else if(tipo == 'decrescente'){
            return adate < bdate ? -1 : 1;
        }
    }
    var order="";
    nposY = 0;
    $("#blocoSite li").sort(lxp).each(function(i, el){
        order += el.outerHTML+"\n";
        nposY += 15;

        $(this).animate({
            left: 200,
            top :  nposY
        }, 800);
    });
    $('#ordered').html(order);
}

这样，您将按列表顺序放置列表项，而不是基于项的旧位置（除了排序）。

sort（）函数不起作用

4 个答案: