【html】前端实现筛选条件跳转

之前与PHP的合作模式之一是前端这边负责写好静态页面交货。

那现在新进的公司，PHP说筛选由前端来实现。

嗯，好吧。实现就实现，多锻炼下咯。

<div class="fliter">
    <div class="comtent_class">
        <!--{loop $category $k $p}-->
        <ul data-index="{$k}">
            <span caty-></div>
              </div>
            </a>
        </li>
        <!--{/loop}-->
    </ul>
</div>

筛选区在 div.filter 中，分类用ul格开
筛选效果：鼠标移至选项时该href链接对应更正，鼠标点击时跳转至各筛选条件对应的链接。
筛选原理：鼠标操作存置当前data-id置对应类别ulIndex下标的urlArr中
注意点1：鼠标移至时该data-id存置链接数组中组成当前链接，鼠标移出时则要清掉链接数组中对应的值

$(function(){
    /*筛选链接--start*/
    function hrefLink(ele,type){
        var urlArr=[],wHref=window.location.href.match(/\d+/g);
        for(var i=0;i< $('.fliter ul').length;i++){if(wHref==null){urlArr[i]=0;}else{urlArr[i]= wHref[i];}}
        $(".fliter .comtent_demo ul").data('index',$('.fliter .comtent_class ul').length);
        var catyIndex=ele.parents('ul').data('index');
        var catyId=ele.parents('li').siblings('span').attr('caty-id');
        var dataId=ele.parents('li').data('id');
        var href=ele.attr('href');
        if(type=="mouseenter"){
            urlArr[catyIndex]=dataId;
        }else{
            urlArr[catyIndex]=0;
        }
        var hrefparm="?z+urlArr[5];
        ele.attr('href',window.location.pathname.concat(hrefparm));
        return urlArr;
    }
    $('.fliter li a').on('mouseenter', function(){hrefLink($(this),"mouseenter");});
    $('.fliter li a').on('mouseleave', function(){hrefLink($(this),"mouseleave");});


    $('.filter li a').on('click',function(){$(this).parents('li').addClass('active').siblings().removeClass('active');})
    /*筛选链接--end*/
})