javascript - sort() 函数不起作用

Question

当然问题不在功能上，但是如下代码所示，需要点击两次才能降序~增长。我怎样才能解决这个问题？

这是一个 jsFiddle 示例。

我相信这个错误：

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

尝试将 0 添加到小于 10 的月份，<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

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

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

Answer 4

将javascript代码替换为：

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

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