我编写了代码来按价格属性对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();
});
答案 0 :(得分:2)
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();
});
答案 1 :(得分:1)
在Daniel's answer中,使用减法(<
)代替逻辑比较(>
,-
)。
&#34;比较&#34; sort(compare)
中的函数必须包含两个参数a
和b
。 compare
函数的返回值需要根据以下两个参数返回值:
a
大于b
a
等于b
a
小于b
有关详细信息,请参阅答案"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();
});