价格的升序排序及扩展 首先,我们先简单的实现一下价格的升序 html结构如下:
<#ul id = "list">
<#li data-price="{data-prise}"><#/li>
<#li data-price="{data-prise}"><#/li>
<#li data-price="{data-prise}"><#/li>
<#/ul>
js:
var listBox = document.getElementById("list");
var oList = document.getElementByTagName("li");
oList = util.toArray(oList);
olist.sort(function(a,b){
var curPrice = a.getAtrribute("data-price");
var nextPrice = b.getAtrribute("data-price");
return curPrice-nextPrice;
})
for(var i=0;i<oList.length;i++){
listBox.append(oList[i])
}
那么多列升降序切换怎么实现?
var listBox = document.getElementById("list");
var oList = document.getElementByTagName("li");
var headerBox = document.getElementById("header");
var linkList = document.getElementByTagName("a");
for(var i=0;i<linkList.length;i++){
linkList[i].myMethod = -1 ;
linkList[i].myIndex = i ;
linkList[i].click = function(){
this.myMethod *= -1
changePosition.call(this)
}
}
function changePosition(){
var _this = this;
//点击当前A,我们需要把其他A标签回归初始值,保证下一次点击其他A变迁还是从升序开始的
_this.myMethod = -1;
for(var k=0;k<linkList.length;k++){
if(k !== _this.myIndex){
linkList[k] = -1;
}
}
oList = util.toArray(oList);
olist.sort(function(a,b){
var index = _this.myIndex,
attr = '';
switch(index){
case(1){
attr = 'data-name'
}
case(2){
attr = 'data-price'
}
case(3){
attr = 'data-hot'
}
case(4){
attr = 'data-date'
}
}
var cur = a.getAtrribute(attr);
var next = b.getAtrribute(attr);
if(index == 4){
cur.replace(/-/g,'');
next.replace(/-/g,'');
}
return (cur - next)*_this.myMethod;
})
}
var frg = document.createDocumentFragment();
for(var i=0;i<oList.length;i++){
listBox.append(frg);
frg = null;
}