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

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

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

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

<div class="fliter">
    <div class="comtent_class">
        <!--{loop $category $k $p}-->
        <ul data-index="{$k}">
            <span caty-id="{$p['id']}">{$p['cate_name']}</span>
            <!--{if $k==0}-->
            <li data-id='0' {if $zid == 0}class="active"{/if}><a href="vrcase.html?zid=0&yid=0&fid=0&mid=0&bid=0&sid=0">全部</a></li>
            <!--{/if}-->
            <!--{if $k==1}-->
            <li data-id='0' {if $yid == 0}class="active"{/if}><a href="vrcase.html?zid=0&yid=0&fid=0&mid=0&bid=0&sid=0">全部</a></li>
            <!--{/if}-->
            <!--{if $k==2}-->
            <li data-id='0' {if $fid == 0}class="active"{/if}><a href="vrcase.html?zid=0&yid=0&fid=0&mid=0&bid=0&sid=0">全部</a></li>
            <!--{/if}-->
            <!--{if $k==3}-->
            <li data-id='0' {if $mid == 0}class="active"{/if}><a href="vrcase.html?zid=0&yid=0&fid=0&mid=0&bid=0&sid=0">全部</a></li>
            <!--{/if}-->
            <!--{if $k==4}-->
            <li data-id='0' {if $bid == 0}class="active"{/if}><a href="vrcase.html?zid=0&yid=0&fid=0&mid=0&bid=0&sid=0">全部</a></li>
            <!--{/if}-->

            <!--{loop $p['tag'] $c}-->

                <!--{if $k==0}-->
                <li data-id="{$c['id']}" {if $zid == $c['id']}class="active"{/if}>
                <a href="vrcase.html?zid={$c['id']}&yid=0&fid=0&mid=0&bid=0&sid=0">{$c['tag_name']}</a>
                </li>
                <!--{elseif $k==1}-->
                <li data-id="{$c['id']}" {if $yid == $c['id']}class="active"{/if}>
                <a href="vrcase.html?zid=0&yid={$c['id']}&fid=0&mid=0&bid=0&sid=0">{$c['tag_name']}</a>
                </li>
                <!--{elseif $k==2}-->
                <li data-id="{$c['id']}" {if $fid == $c['id']}class="active"{/if}>
                <a href="vrcase.html?zid=0&yid=0&fid={$c['id']}&mid=0&bid=0&sid=0">{$c['tag_name']}</a>
                </li>
                <!--{elseif $k==3}-->
                <li data-id="{$c['id']}" {if $mid == $c['id']}class="active"{/if}>
                <a href="vrcase.html?zid=0&yid=0&fid=0&mid={$c['id']}&bid=0&sid=0">{$c['tag_name']}</a>
                </li>
                <!--{elseif $k==4}-->
                <li data-id="{$c['id']}" {if $bid == $c['id']}class="active"{/if}>
                <a href="vrcase.html?zid=0&yid=0&fid=0&mid=0&bid={$c['id']}&sid=0">{$c['tag_name']}</a>
                </li>
                <!--{/if}-->
            <!--{/loop}-->
        </ul>
        <!--{/loop}-->

    </div>
    <div class="comtent_demo">
        <ul data-index="">
            <li data-id="0" {if $sid == 0}class="active"{/if}>
                <a href="vrcase.html?zid=0&yid=0&fid=0&mid=0&bid=0&sid=0">最新</a>
            </li>
            <li data-id="1" {if $sid == 1}class="active"{/if}>
                <a href="vrcase.html?zid=0&yid=0&fid=0&mid=0&bid=0&sid=1">最热</a>
            </li>
        </ul>
    </div>
</div>

<div class="comtent_tit">
    <ul class="imglist">
        <!--{loop $row $p}-->
        <li class="mlSty">
            <a href="case_list.html?title={$p['case_title']}&no={$p['case_content']}" target="view_frame">
              <div class="img">
                <img src="{$p['case_cover']}" alt=""></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="?zid="+urlArr[0]+"&yid="+urlArr[1]+"&fid="+urlArr[2]+"&mid="+urlArr[3]+"&bid="+urlArr[4]+"&sid="+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*/
})