按属性排序 Div - asc 或 desc

Question

我编写了按价格属性对 div 进行排序的代码。但不会正常工作。谁能帮忙？ 所以可以在代码中看到jsfiddle

Js：

    $(".link-sort-list").on("click",function(e){
    var $list = $('#sort-list');
    var $productList = $('div.product-box',$list);
    $productList.sort(function(a, b){
        var keyA = $(a).attr("price");
        var keyB = $(b).attr("price");

        if($(this).hasClass('asc')){
            console.log("asc");
            return (parseInt(keyA) > parseInt(keyB)) ? 1 : 0;
        } else {
            console.log("desc");
            return (parseInt(keyA) < parseInt(keyB)) ? 1 : 0;
        }
    });
    $.each($productList, function(index, row){
        $list.append(row);
    });
    e.preventDefault();
});

Answer 1

https://jsfiddle.net/danvim/2xh4LLgr/3/

你需要记住$this在不同功能范围内的变化。

这样设置目标：

var $this = $(this)

更新代码：

$(".link-sort-list").on("click",function(e){
    var $this = $(this);  //<--
    var $list = $('#sort-list');
    var $productList = $('div.product-box',$list);
    $productList.sort(function(a, b){
        var keyA = $(a).attr("price");
        var keyB = $(b).attr("price");

        if($this.hasClass('asc')){ //<--
            console.log("asc");
            return (parseInt(keyA) > parseInt(keyB)) ? 1 : 0;
        } else {
            console.log("desc");
            return (parseInt(keyA) < parseInt(keyB)) ? 1 : 0;
        }
    });
    $.each($productList, function(index, row){
        $list.append(row);
    });
    e.preventDefault();
});

最终解决方案

但我建议将$this 的检查放在sort 方法之外。此外，您不需要速记，只需返回布尔值即可。

所以我会像这样简化它：https://jsfiddle.net/danvim/2xh4LLgr/5/

这将运行得更快，因为检查 .asc 只发生一次，而您的原始函数将对每个要比较的项目检查一次。

$(".link-sort-list").on("click",function(e){
    var $this = $(this);
    var $list = $('#sort-list');
    var $productList = $('div.product-box',$list);
    var order = $this.hasClass('asc');
    console.log(order);
    $productList.sort(function(a, b){
        var keyA = $(a).attr("price");
        var keyB = $(b).attr("price");
            return order ? (parseInt(keyA) > parseInt(keyB)) : (parseInt(keyA) < parseInt(keyB));
    });
    $.each($productList, function(index, row){
        $list.append(row);
    });
    e.preventDefault();
});

Answer 2

在Daniel's answer 中，使用减法（-）代替逻辑比较（<、>）。

sort(compare) 中的“比较”函数必须有两个参数a 和b。 compare函数的返回值需要根据这两个参数返回一个值：

1. 如果a 大于b，则返回大于0
2. 如果a 等于b，则返回0
3. 如果a 小于b，则返回小于0

有关详细信息，请参阅答案"How does sort function work in JavaScript"，以很好的方式解释。

$(".link-sort-list").on("click",function(e){
    var $this = $(this);
    var $list = $('#sort-list');
    var $productList = $('div.product-box',$list);
    var order = $this.hasClass('asc');
    console.log(order);
    $productList.sort(function(a, b){
        var keyA = $(a).attr("price");
        var keyB = $(b).attr("price");
        return order ? (parseInt(keyA) - parseInt(keyB)) : (parseInt(keyB) - parseInt(keyA));
    });
    $.each($productList, function(index, row){
       $list.append(row);
    });
    e.preventDefault();
});