2

我正在使用 jquery 制作一个简单的排序功能，我想将排序从 alpha 切换到 z 和 z 到 alpha。

第一个条件是有效的，但我无法诉诸（z 到 alpha）..

html:

<a href="#">Toggle Sort</a>

<ul>
    <li>Apple</li>
    <li>Bascket</li>
    <li>Umberla</li>
    <li>Zebra</li>
    <li>Good Student</li>
    <li>Liable</li>
 </ul>

我的js：

$("a").on("click", function(){

   var elements = $("ul").find("li").get();

   var sorted = elements.sort(function(a, b){
       if($(a).text() > $(b).text()){
           return 1;
       }

       if($(a).text() < $(b).text()){
           return -1;
       }
    });

    $("ul").html(sorted);

});

这里有什么问题..

这是jsfiddle

提前致谢..

我更新了工作示例：这是 jsfiddle 的工作示例

4

4 回答 4

2

您需要交换一个切换状态来获得真正的排序方向，这可以像这样简单地完成：

var elements = $("ul").find("li");
var state = false;

$("a").on("click", function () {
    state = !state;

    var sorted = elements.sort(function (a, b) {
        var _a = $(a).text();
        var _b = $(b).text();

        if (_a > _b) return state ? 1 : -1;
        if (_a < _b) return state ? -1 : 1;
    });

    $("ul").html(sorted);
});

http://jsfiddle.net/ARTsinn/sbWV3/3

更新

为了使排序功能更“简单”，您可以替换以下行：

var _a = $(a).text();
var _b = $(b).text();

if (_a > _b) return state ? 1 : -1;
if (_a < _b) return state ? -1 : 1;

使用这个简单的 1 行三元语句运算符：

return !state || ($(a).text() > $(b).text()) ? 1 : -1;

http://jsfiddle.net/ARTsinn/sbWV3

于 2013-06-07T06:04:43.070 回答
0

工作 jsFiddle 演示

您需要一种算法来查找当前的排序顺序：

$("a").on("click", function () {
    var type = 'asc';
    if ($(this).data('desc') === true) {
        type = 'desc';
        $(this).data('desc', false);
    }
    else {
        $(this).data('desc', true);
    }

    var elements = $("ul").find("li").get();
    var sorted = elements.sort(function(a, b){
             if($(a).text() > $(b).text()){ return  1; }
        else if($(a).text() < $(b).text()){ return -1; }
        return 0;
    });

    if (type == 'desc') {
        sorted.reverse();
    }

    $("ul").html(sorted);
});
于 2013-06-07T05:47:01.020 回答
0

你需要设置一个 方向0标志（当它相等时你也应该返回）

http://jsfiddle.net/CX5Hu/14/

var dir=-1;

$("a").on("click", function(){

dir=dir*-1;

   var elements = $("ul").find("li").get();

   var sorted = elements.sort(function(a, b){

       if($.trim($(a).text()) > $.trim($(b).text())){
           return 1*dir;
       }

       if($.trim($(a).text()) < $.trim($(b).text())){
           return -1* dir;
       }
       return 0;
    });

   $("ul").html(sorted);


})

-trim可以删除。只是想确保没有空间和类似的东西。

于 2013-06-07T05:56:02.147 回答
0

您可以class在初始排序后设置 a ，然后使用以下reverse()方法：

$("a").on("click", function () {
    var parentList = $("ul");
    var elements = parentList.children("li").get();
    var sorted = !parentList.is(".sorted") ? function () {
            elements.sort(function (a, b) {
                var a1 = $(a).text().substring(0, 1);
                var b1 = $(b).text().substring(0, 1);
                parentList.addClass("sorted");
                if (a1 > b1) {return 1;}
                if (a1 < b1) {return -1;}
                return 0;
            });
            return elements;
        } : elements.reverse();
    parentList.append(sorted);
});

工作小提琴

于 2013-06-07T06:03:30.493 回答