按属性排序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中，使用减法（<）代替逻辑比较（>，-）。

＆＃34;比较＆＃34; 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();
});