PHP多条件筛选JS代码分享与实践

本文将介绍如何通过PHP与JavaScript实现多条件筛选功能，主要内容以代码形式呈现，旨在帮助开发者掌握多条件筛选的实现方法。

##筛选条件概述

本文将从房型、售价、特色、类型及售卖状态等多个维度展开讨论，提供完整的筛选逻辑实现。

###房型筛选

房型筛选主要基于房间数量进行分类。开发者可以通过以下方式实现：

// 示例房型筛选房型过滤条件如下：$房型数组 = array('1室', '2室', '3室', '4室');

###售价筛选

售价筛选根据不同价格区间进行分类，具体实现如下：

// 示例售价筛选$售价数组 = array('100万以下', '100-150万', '150-200万', '200-250万', '250-300万', '300万以上');

###特色筛选

特色筛选主要包含观景飘窗、低密度、花园洋房和车位充足等选项。开发者可采用以下方式实现：

// 示例特色筛选$特色数组 = array('观景飘窗', '低密度', '花园洋房', '车位充足');

###类型筛选

类型筛选涵盖住宅、别墅、写字楼、商铺和底商等多个类别。具体实现如下：

// 示例类型筛选$类型数组 = array('住宅', '别墅', '写字楼', '商铺', '底商');

###售卖状态筛选

售卖状态主要包含在售和售罄两种状态。开发者可参考以下实现：

// 示例售卖状态$售卖数组 = array('在售', '售罄');

##多条件筛选实现逻辑

本文将介绍一个完整的多条件筛选实现方案，涵盖参数获取、筛选处理及URL状态维护等核心功能。

###1. 参数获取

首先，开发者需要获取URL中传递的筛选参数。以下是具体实现：

function getQueryString() {    // 获取URL中的查询参数    $result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+", "g"));    // 处理无查询参数的情况    if (!$result) {        return "";    }    // 去除URL中的查询参数前的'?'符号    for ($i = 0; $i < $result.length; $i++) {        $result[$i] = $result[$i].substring(1);    }    return $result;}

###2. 筛选处理

在获取了筛选参数后，下一步是根据这些参数对数据进行筛选。以下是核心筛选逻辑：

function goSort($name, $value) {    // 获取当前URL中的查询参数    $string_array = getQueryString();    // 获取原始URL    $oldUrl = (strpos(document.URL, "loupan.html") === false) ? document.URL . "loupan.html" : document.URL;    // 构建新的URL    $newUrl = '';    // 处理已存在的查询参数    if (strlen($string_array) > 0) {        $repeatField = false;        for ($i = 0; $i < strlen($string_array); $i++) {            $currentParam = $string_array[$i];            // 检查是否存在重复的筛选字段            if (strpos($currentParam, $name) !== false) {                $repeatField = true;                // 替换重复的筛选字段值                $newUrl = $oldUrl . str_replace($currentParam, $name . "=" . $value, $oldUrl);            }        }        // 如果存在重复字段，直接返回处理后的URL        if ($repeatField) {            $newUrl = $oldUrl . str_replace($string_array, $name . "=" . $value, $oldUrl);        } else {            // 如果没有重复字段，追加新的筛选参数            $newUrl = $oldUrl . "&" . $name . "=" . $value;        }    } else {        // 如果没有查询参数，直接追加新的筛选参数        $newUrl = $oldUrl . "?" . $name . "=" . $value;    }    // 更新URL    window.location = $newUrl;}

###3. 初始化筛选

在页面加载时，需要初始化已存在的筛选参数。以下是具体实现：

$(document).ready(function() {    $string_array = getQueryString();    for ($i = 0; $i < strlen($string_array); $i++) {        $currentParam = $string_array[$i];        $tempArr = explode "=", $currentParam;        setSelected($tempArr[0], $tempArr[1]);    }});

###4. 选项选中处理

以下是选项选中与否的逻辑：

function setSelected($name, $value) {    // 获取指定类别的所有列表项    $all_li = $("#{$name}).find("li");    // 去除所有选项的选中类    $all_li.each(function() {        $(this).removeClass("selected");    });    // 为指定选项添加选中类    $all_li.eq($value).addClass("selected");}

##实际应用示例

以下是一个实际应用示例，展示了如何在页面中使用上述筛选逻辑：

    房地产筛选    
           
    本文将介绍如何通过PHP与JavaScript实现多条件筛选功能，主要内容以代码形式呈现，旨在帮助开发者掌握多条件筛选的实现方法。
        
                
     
      房型：
     
            
                     
      1室
                
      2室
                
      3室
                
      4室
            
     
        
    
        
                
     
      售价：
     
            
                     
      100万以下
                
      100-150万
                
      150-200万
                
      200-250万
                
      250-300万
                
      300万以上
            
     
        
    
        
                
     
      特色：
     
            
                     
      观景飘窗
                
      低密度
                
      花园洋房
                
      车位充足
            
     
        
    
        
                
     
      类型：
     
            
                     
      住宅
                
      别墅
                
      写字楼
                
      商铺
                
      底商
            
     
        
    
        
                
     
      售卖：
     
            
                     
      在售
                
      售罄

以上代码示例展示了一个完整的房地产筛选页面，结合了上述多条件筛选逻辑，能够满足不同用户的筛选需求。

转载地址：http://xatfk.baihongyu.com/

你可能感兴趣的文章