【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*/
})