价格的升序排序及扩展

198 阅读1分钟

价格的升序排序及扩展 首先,我们先简单的实现一下价格的升序 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 = -1for(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;
}