多条件筛选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>

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');
}
}