多条件筛选TP5

发表于 2017年09月23日
javascript , PHP

多条件筛选

上代码html：

<!DOCTYPE html>
<html>
<head>
    <title>多重筛选</title>
</head>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
        font-family: "Microsoft Yahei";
        box-sizing: border-box;
    }
    .row{
        width: 500px;
        height: 30px;
        margin-top: 10px;
        margin-left: 20px;
        border-bottom: 1px dashed #5FB878;
    }
    .row p{
        float: left;
    }
    ul li{
        float: left;
        list-style: none;
        margin-left: 20px;
    }
    ul li:hover{
        cursor: pointer;
    }
    .cur{
        background-color: #d8544c;
    }
</style>
<body>
    <div class="row">
        <p>价格：</p>
        <ul>
            <li class="price_0 cur" onclick="filter('price',0)">不限</li>
            <li class="price_1" onclick="filter('price',1)">500以下</li>
            <li class="price_2" onclick="filter('price',2)">500-1000</li>
            <li class="price_3" onclick="filter('price',3)">1000以上</li>
        </ul>
    </div>
    <div class="row">
        <p>分类：</p>
        <ul>
            <li class="cate_0 cur" onclick="filter('cate',0)">不限</li>
            <li class="cate_1" onclick="filter('cate',1)">普通</li>
            <li class="cate_2" onclick="filter('cate',2)">精品</li>
            <li class="cate_3" onclick="filter('cate',3)">高级</li>
        </ul>
    </div>
    <div class="row">
        <p>颜色：</p>
        <ul>
            <li class="color_0 cur" onclick="filter('color',0)">不限</li>
            <li class="color_1" onclick="filter('color',1)">酒红色</li>
            <li class="color_2" onclick="filter('color',2)">白色</li>
            <li class="color_3" onclick="filter('color',3)">深黑色</li>
        </ul>
    </div>
 
    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
    <script>
        function getUrl(){
            //匹配url中以?或&连接的字符，拆成数组
            var url = document.URL.match(/[?&][^?&]+=[^?&]+/g)
            if (url===null) {
                return ''
            }else{
                for (var i = 0; i<url.length; i++) {
                    url[i]=url[i].slice(1)
                }
            }
            return url
        }
 
        function filter(name,val){
            var getString=getUrl()
            var oldUrl=document.URL;
            var newUrl;
            if (getString.length>0) {
                var repeat=true;
                for (var i = 0; i < getString.length; i++) {
                    if (getString[i].indexOf(name)>=0) {
                        repeat=false;
                        newUrl=oldUrl.replace(getString[i],name+'='+val)
                    }
                }
                if(repeat){
                    newUrl=oldUrl+'&'+name+'='+val
                }
            }else{
                newUrl=oldUrl+'?'+name+'='+val;
            }
            window.location=newUrl
        }
 
        $(function(){
            var getQueryString=getUrl();
            for (var i=0; i<getQueryString.length; i++) {
                val = getQueryString[i].split('=')
                if (val[1]!==0) {
                    $('.'+val[0]+'_0').removeClass('cur')
                }
                if(val[1]==0){
                    $('.'+val[0]+'_0').addClass('cur')
                }
                $('.'+val[0]+'_'+val[1]).addClass('cur')
            }
        })
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<!DOCTYPE html>

<html>

<head>

</head>

margin: 0px;

padding: 0px;

font-family: "Microsoft Yahei";

box-sizing: border-box;

}

.row{

width: 500px;

height: 30px;

margin-top: 10px;

margin-left: 20px;

border-bottom: 1px dashed #5FB878;

}

.row p{

float: left;

}

ul li{

float: left;

list-style: none;

margin-left: 20px;

}

ul li:hover{

cursor: pointer;

}

.cur{

background-color: #d8544c;

}

</style>

<body>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

function getUrl(){

//匹配url中以?或&连接的字符，拆成数组

var url = document.URL.match(/[?&][^?&]+=[^?&]+/g)

if (url===null) {

return ''

}else{

for (var i = 0; i<url.length; i++) {

url[i]=url[i].slice(1)

}

return url

}

function filter(name,val){

var getString=getUrl()

var oldUrl=document.URL;

var newUrl;

if (getString.length>0) {

var repeat=true;

for (var i = 0; i < getString.length; i++) {

if (getString[i].indexOf(name)>=0) {

repeat=false;

newUrl=oldUrl.replace(getString[i],name+'='+val)

}

if(repeat){

newUrl=oldUrl+'&'+name+'='+val

}

}else{

newUrl=oldUrl+'?'+name+'='+val;

}

window.location=newUrl

}

$(function(){

var getQueryString=getUrl();

for (var i=0; i<getQueryString.length; i++) {

val = getQueryString[i].split('=')

if (val[1]!==0) {

$('.'+val[0]+'_0').removeClass('cur')

}

if(val[1]==0){

$('.'+val[0]+'_0').addClass('cur')

}

$('.'+val[0]+'_'+val[1]).addClass('cur')

}

})

</script>

</body>

</html>

php

<?php
namespace app\home\controller;
use think\Request;
 
class Index extends Controller()
{ 
    public function testUrl(){
        $request = Request::instance();
        if($request->isGet()){
            //get到选项
            $request->get('cate') ? $map['cate'] = $request->get('cate') : '';
            $request->get('color') ? $map['color'] = $request->get('color') : '';
            switch ($request->get('price')) {
                case 1:
                    $map['price'] = ['between', '0,500'];
                    break;
 
                case 2:
                    $map['price'] = ['between', '500,1000'];
                    break;
 
                case 3:
                    $map['price'] = ['gt', '1000'];
                    break;
            }
            dump($map);
        }
        return $this->fetch(':testurl');
    }
}