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

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

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

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