Question

我正在使用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);

});

这里有什么问题..

这是hre is the jsfiddle

提前致谢..

我更新了工作示例：here is the working example of jsfiddle

Answer 1

你需要交换一个toggle-state来获得真正的排序方向，这可以像这样完成：

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

Answer 2

<强> Working jsFiddle Demo

你需要一个算法找到当前的排序顺序：

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

Answer 3

你需要设置一个方向标志（当它相等时你也应该返回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可以删除。只是想确保没有空间和类似的东西。

Answer 4

您可以在初始排序后设置class，然后只使用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);
});

Working fiddle

排序有效，但切换不起作用

4 个答案: