3

我不知道为什么，但是这段代码没有正确排序我的 li。它们正在改变顺序，但例如，如果它们像这样 1、5、2、9，那么它正在更改为 5、2、9、1。

jQuery代码：

var sorter_type=new Array("date_sort","price_sort","discount_sort","time_sort");
function sorting_by_filter(filter_id,field)
{
    var sort_type="";

    if($('#'+filter_id).attr("class")=="asc")
    {   
        $('#'+filter_id).removeClass("asc");
        $('#'+filter_id).addClass("desc");
        sort_type=" desending";
    }
    else
    {
        $('#'+filter_id).removeClass("desc");
        $('#'+filter_id).addClass("asc");
        sort_type="";
    }

    for(i=0;i<sorter_type.length;i++)
    {
        if(sorter_type[i]==filter_id)
        {
            $('#'+filter_id).parent().attr("class","");
            $('#'+filter_id).parent().addClass("clsTop_Menu_Act"+sort_type);
        }
        else
        {
            $("#"+sorter_type[i]).parent().attr("class","");
        }

    }

    var $sort = $('#'+filter_id);

    var $list = $('.clsDeal_Whole_Cont');
    var $listLi = $('li.clsDeal_Blk_Cont',$list);
    $listLi.sort(function(a, b){
        var keyA = parseInt($(a).attr(field));
        var keyB = parseInt($(b).attr(field));
        if($($sort).hasClass('asc')){
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA < keyB) ? 1 : 0;
        }
    });
    $.each($listLi, function(index, row){
        $list.append(row);
    });
}

按钮代码：

        <ul class="clearfix" id="filters">
      <li class="clsTop_Menu_Act"><a href="javascript:void(0)" class="asc"     onclick="sorting_by_filter('date_sort','title')" id="date_sort">New</a></li>
          <li><a href="javascript:void(0)" onclick="sorting_by_filter('price_sort','price')" class="asc" id="price_sort">Price</a></li>
          <li><a href="javascript:void(0)" onclick="sorting_by_filter('discount_sort','discount')" class="asc" id="discount_sort">Discount</a></li>
          <li><a href="javascript:void(0)" onclick="sorting_by_filter('time_sort','time_left')" class="asc" id="time_sort" >Time Left</a></li>
</ul>

需要排序的内容：

<ul class="clsDeal_Whole_Cont clearfix">
     <li class="clsDeal_Blk_Cont" style="display:block" id="deal_1"  price="2" discount="50" time_left="1360363800">
     <li class="clsDeal_Blk_Cont" style="display:block" id="deal_10"  price="20" discount="45" time_left="1360363700">
     <li class="clsDeal_Blk_Cont" style="display:block" id="deal_5"  price="19" discount="80" time_left="1360363800">
</ul>
4

2 回答 2

1

也许是因为您永远不会-1从排序回调中返回。总是只有1or 0，顺便说一句，你也没有正确返回。

如果您按升序排序，则必须返回-1（负数）如果keyA小于keyB，0如果它们相等或+1（正数）如果keyA大于keyB。

例子：

$listLi.sort(function(a, b){
    var keyA = parseInt($(a).attr(field), 10);
    var keyB = parseInt($(b).attr(field), 10);

    // sorts in descending order. The result will be
    // negative if keyA > keyB
    // 0        if keyA == keyB
    // positive if keyA < keyB

    var result = keyB - keyA;
    if ($sort.hasClass('asc') {
        // multiplying by -1 reverses the order
        result = result * (-1);
    }
    return result;
});

Array#sort通过阅读文档了解更多关于排序回调的信息。

于 2013-02-08T17:03:11.647 回答
0

正如 Felix Kling 指出的那样，您的排序功能还没有达到标准。这些是有效排序必须解决的条件，来自MDN 文档：

  • 如果compareFunction(a, b)小于 0，则将 a 排序到比 b 低的索引。
  • 如果compareFunction(a, b)返回 0，则 a 和 b 彼此保持不变，但对所有不同元素进行排序。注意：ECMAscript 标准不保证这种行为，因此并非所有浏览器（例如，至少可以追溯到 2003 年的 Mozilla 版本）都尊重这一点。
  • 如果compareFunction(a, b)大于 0，则将 b 排序到比 a 低的索引。
  • compareFunction(a, b)当给定一对特定的元素 a 和 b 作为其两个参数时，必须始终返回相同的值。如果返回不一致的结果，则排序顺序未定义

他已经发布了一个有效的排序功能（并且 1'uped 我的文档链接），所以我将只为您指出一个 jQuery UI 插件，以便在未来实现这一点：jQuery UI Sortable。

于 2013-02-08T17:06:52.670 回答