jquery: 列表查询页面更新

html:

<div class="filter-content filter-content-border" id="bubbleFilter">
                <div class="filter-item clearfix">
                    <label class="filter-label">区域：</label>
                    <div class="data-list">
                        <a class="item-a" data-type="l" data-id="all" data-url="" href="javascript:void(0);">全部</a>
                        <a class="item-a" data-type="l" data-id="1" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="2" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="3" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="4" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="5" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="6" data-url="" href="javascript:void(0);">谷城</a>
                        <a class="item-a" data-type="l" data-id="7" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="8" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="9" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="10" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="11" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="12" data-url="" href="javascript:void(0);">樊城</a>
                        <a class="item-a" data-type="l" data-id="13" data-url="" href="javascript:void(0);">樊城区</a>
                        <a class="item-a" data-type="l" data-id="14" data-url="" href="javascript:void(0);">樊城襄州</a>
                        <a class="item-a" data-type="l" data-id="15" data-url="" href="javascript:void(0);">樊城</a>
                        <a class="item-a" data-type="l" data-id="16" data-url="" href="javascript:void(0);">樊城</a>
                    </div>
                </div>
                <!-- <div class="filter-regin clearfix">
                    <div class="data-list">
                        <a href="#no" class="actived">全部</a>
                        <a href="javascript:void(0);">樊城</a>
                        <a href="javascript:void(0);">华丰路</a>
                        <a href="javascript:void(0);">火车站</a>
                        <a href="javascript:void(0);">华洋堂</a>
                        <a href="javascript:void(0);">人民广场</a>
                        <a href="javascript:void(0);">沃尔玛</a>
                        <a href="javascript:void(0);">万达广场</a>
                        <a href="javascript:void(0);">沿江大道</a>
                    </div>
                </div> -->
                <!-- <div class="filter-item clearfix">
                    <label class="filter-label">地铁：</label>
                    <div class="data-list">
                        <a href="javascript:void(0);">全部</a>
                        <a href="javascript:void(0);" class="actived">一号线</a>
                    </div>
                </div> -->
                <div class="filter-item clearfix">
                    <label class="filter-label">价格：</label>
                    <div class="data-list">
                        <a class="data-tab actived" href="javascript:;">单价<em class="iconfont">&#xe68a;</em></a>
                        <a class="data-tab" href="javascript:;">总价<em class="iconfont">&#xe68a;</em></a>
                    </div>
                    <div class="data-list data-tab-item">
                        <a class="item-a" data-type="u" data-id="all" data-url="" href="javascript:void(0);">全部</a>
                        <a class="item-a" data-type="u" data-id="1" data-url="" href="javascript:void(0);">20000以下</a>
                        <a class="item-a" data-type="u" data-id="2" data-url=""
                            href="javascript:void(0);">20000-30000</a>
                        <a class="item-a" data-type="u" data-id="3" data-url="" href="javascript:void(0);">100000以上</a>
                        <span>单价(元/平)</span>
                        <!-- <input type="text" id="unitPriceFloor" value="">
                        <span>-</span>
                        <input type="text" id="unitPriceCeil" value="">
                        <input type="button" value="确定" id="unitPriceBtn"> -->
                    </div>
                    <div class="data-list data-tab-item hide">
                        <a class="item-a" data-type="t" data-id="all" data-url="" href="javascript:void(0);">全部</a>
                        <a class="item-a" data-type="t" data-id="1" data-url="" href="javascript:void(0);">100万以下</a>
                        <a class="item-a" data-type="t" data-id="2" data-url="" href="javascript:void(0);">100-300</a>
                        <a class="item-a" data-type="t" data-id="3" data-url="" href="javascript:void(0);">300-500</a>
                        <a class="item-a" data-type="t" data-id="4" data-url="" href="javascript:void(0);">500-800</a>
                        <a class="item-a" data-type="t" data-id="5" data-url="" href="javascript:void(0);">800-1000</a>
                        <a class="item-a" data-type="t" data-id="6" data-url="" href="javascript:void(0);">1000-2000</a>
                        <a class="item-a" data-type="t" data-id="7" data-url="" href="javascript:void(0);">2000万以上</a>
                        <span>总价(万元)</span>
                        <!-- <input type="text" id="totalPriceFloor" value="">
                        <span>-</span>
                        <input type="text" id="totalPriceCeil" value="">
                        <input type="button" value="确定" id="totalPriceBtn"> -->
                    </div>
                </div>
                <div class="filter-item clearfix">
                    <label class="filter-label">户型：</label>
                    <div class="data-list">
                        <a class="item-a" data-type="h" data-id="all" data-url="" href="javascript:void(0);">全部</a>
                        <a class="item-a multi-item" data-type="h" data-id="1" data-url=""
                            href="javascript:void(0);"><i></i>一居</a>
                        <a class="item-a multi-item" data-type="h" data-id="2" data-url=""
                            href="javascript:void(0);"><i></i>两居</a>
                        <a class="item-a multi-item" data-type="h" data-id="3" data-url=""
                            href="javascript:void(0);"><i></i>三居</a>
                        <a class="item-a multi-item" data-type="h" data-id="4" data-url=""
                            href="javascript:void(0);"><i></i>四居</a>
                        <a class="item-a multi-item" data-type="h" data-id="5" data-url=""
                            href="javascript:void(0);"><i></i>五居</a>
                        <a class="item-a multi-item" data-type="h" data-id="6" data-url=""
                            href="javascript:void(0);"><i></i>五居以上</a>
                    </div>
                </div>
                <!-- <div class="filter-item clearfix">
                    <label class="filter-label">面积：</label>
                    <div class="data-list">
                        <a href="javascript:void(0);" class="actived">全部</a>
                        <a href="javascript:void(0);"><i></i>60m²以下</a>
                        <a href="javascript:void(0);"><i></i>60-80m²</a>
                        <a href="javascript:void(0);"><i></i>80-100m²</a>
                        <a href="javascript:void(0);"><i></i>100-120m²</a>
                        <a href="javascript:void(0);"><i></i>120-150m²</a>
                        <a href="javascript:void(0);"><i></i>150-200m²</a>
                        <a href="javascript:void(0);"><i></i>200m²以上</a>
                    </div>
                </div> -->
                <div class="filter-item more-filter clearfix">
                    <label class="filter-label">更多：</label>
                    <div class="select-filter">
                        <div class="select-status">
                            <span>建造年代</span>
                            <i class="select-icon"></i>
                            <input type="hidden" class="hiddenId" value="">
                        </div>
                        <div class="select-list">
                            <a class="item-a" data-type="j" data-id="all" data-url="" href="javascript:void(0);">全部</a>
                            <a class="item-a" data-type="j" data-id="1" data-url=""
                                href="javascript:void(0);">2010以后</a>
                            <a class="item-a" data-type="j" data-id="2" data-url=""
                                href="javascript:void(0);">2005-2010</a>
                            <a class="item-a" data-type="j" data-id="3" data-url=""
                                href="javascript:void(0);">2000-2005</a>
                            <a class="item-a" data-type="j" data-id="4" data-url=""
                                href="javascript:void(0);">2000以前</a>
                        </div>
                    </div>
                    <div class="select-filter">
                        <div class="select-status">
                            <span>物业类型</span>
                            <i class="select-icon"></i>
                            <input type="hidden" class="hiddenId" value="">
                        </div>
                        <div class="select-list">
                            <a class="item-a" data-type="w" data-id="all" data-url="" href="javascript:void(0);">全部</a>
                            <a class="item-a" data-type="w" data-id="1" data-url="" href="javascript:void(0);">住宅</a>
                            <a class="item-a" data-type="w" data-id="2" data-url="" href="javascript:void(0);">商铺</a>
                            <a class="item-a" data-type="w" data-id="3" data-url="" href="javascript:void(0);">别墅</a>
                            <a class="item-a" data-type="w" data-id="4" data-url="" href="javascript:void(0);">写字楼</a>
                        </div>
                    </div>
                    <div class="select-filter">
                        <div class="select-status">
                            <span>特色</span>
                            <i class="select-icon"></i>
                            <input type="hidden" class="hiddenId" value="">
                        </div>
                        <div class="select-list">
                            <a class="item-a" data-type="f" data-id="all" data-url="" href="javascript:void(0);">全部</a>
                            <a class="item-a" data-type="f" data-id="1" data-url="" href="javascript:void(0);">小户型</a>
                            <a class="item-a" data-type="f" data-id="2" data-url="" href="javascript:void(0);">低总价</a>
                        </div>
                    </div>
                    <div class="select-filter">
                        <div class="select-status">
                            <span>装修状况</span>
                            <i class="select-icon"></i>
                            <input type="hidden" class="hiddenId" value="">
                        </div>
                        <div class="select-list">
                            <a class="item-a" data-type="d" data-id="all" data-url="" href="javascript:void(0);">全部</a>
                            <a class="item-a" data-type="d" data-id="1" data-url="" href="javascript:void(0);">毛坯</a>
                            <a class="item-a" data-type="d" data-id="2" data-url="" href="javascript:void(0);">简装修</a>
                            <a class="item-a" data-type="d" data-id="3" data-url="" href="javascript:void(0);">带装修</a>
                        </div>
                    </div>
                </div>
                <!-- <div class="filter-item current-filter clearfix">
                    <span class="fl">当前条件:</span>
                    <div class="filter-selected fl">
                        <a href="javascript:void(0);" class="selected-item">樊城区</a>
                        <a href="javascript:void(0);" class="selected-item">一号线</a>
                        <a href="javascript:void(0);" class="selected-item">一居</a>
                    </div>
                    <a href="javascript:void(0);" class="filter-clear">清空全部</a>
                </div> -->
                <a class="filter-clear-all" href="/pages/esf/list.html">清空全部条件</a>
            </div>

js:

(function ($) {
    FCZX.globalNamespace('FCZX.list.Filter');

    FCZX.list.Filter = function (opt) {
        this._init(opt);
    }
    $.extend(FCZX.list.Filter.prototype, {
        _init: function (opt) {
            this.opt = {
                filterSelecor: '#bubbleFilter',
                itemSelector: '.item-a',
                tabSelector: '.data-tab', //扩展可能会有多个
                tabDataSelector: '.data-tab-item',
                selectSelector: '.select-filter'
            }
            $.extend(true, this.opt, opt || {});
            this._initDomEvent();
        },
        _initDomEvent: function () {
            let _this = this;
            let _opt = _this.opt;
            _opt.$filter = $(_opt.filterSelecor);
            _opt.$item = $(`${_opt.filterSelecor} ${_opt.itemSelector}`);
            _opt.$tab = $(_opt.tabSelector);
            _opt.$tabData = $(_opt.tabDataSelector);

            _this._initDomStatus();
            _this._tabShowEvent(_opt.$tab, _opt.$tabData);

            _opt.$filter.find(_opt.selectSelector).each(function () {
                $(this).hover(function () {
                    $(this).find('.select-list').show();
                }, function () {
                    $(this).find('.select-list').hide();
                })
            })

            _opt.$filter.click(function (event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
                let target = event.target || event.srcElement;
                let tagName = event.target.tagName;
                let $target = $(target);

                if (tagName == 'SPAN') { return };

                if ($target.hasClass('filter-clear-all')) {
                    window.location.href = $target.attr('href');
                    return
                }
                if ($target.hasClass('multi-item')) {
                    _this._multiSelectItem($target);
                }
                else if ($target.parent().hasClass('multi-item')) {
                    _this._multiSelectItem($target.parent());
                }
                else if ($target.parent().hasClass('data-tab-item')) {
                    let switchs = []
                    for (let i = 0; i < $('.data-tab-item').length; i++) {
                        switchs.push($('.data-tab-item').eq(i).find('.item-a').eq(0).data('type'))
                    }
                    _this._switchSelectItem($target, switchs);
                }
                else {
                    _this._singleSelectItem($target);
                }
            });
        },
        _initDomStatus: function () {
            let _this = this;
            let _opt = _this.opt;
            let dataUrl = window.location.search;
            let urlParams = transferUrlParam(dataUrl);
            _opt.$item.each(function () {
                let $this = $(this);
                $this.attr('data-url', dataUrl);
                let dataId = $this.data('id');
                let dataType = $this.data('type');
                let activedId = urlParams[dataType];
                if (!activedId) {
                    $(`${_opt.itemSelector}[data-type=${dataType}]`).eq(0).addClass('actived');
                } else {
                    if ($this.hasClass('multi-item')) {
                        for (const itemId of activedId.split(',')) {
                            if (dataId == itemId) {
                                $this.addClass('actived');
                            }
                        }
                    } else if ($this.parent().hasClass('data-tab-item')) {
                        if (dataId == activedId) {
                            $this.addClass('actived');
                            if (!$this.parent().is(":visible")) {
                                let index = $('.data-tab-item').index($this.parent());
                                $('.data-tab').removeClass('actived');
                                $('.data-tab').eq(index).addClass('actived');
                                $('.data-tab-item').hide();
                                $this.parent().show();
                            }
                        }
                    } else if ($this.parent().hasClass('select-list')) {
                        if (dataId == activedId) {
                            let selectStatus = $this.parent().siblings();
                            selectStatus.find('span').text($this.text());
                            selectStatus.find('input').val(dataId);
                            $this.addClass('actived');
                        }
                    } else {
                        if (dataId == activedId) {
                            $this.addClass('actived');
                        }
                    }
                }
            })
        },
        _singleSelectItem: function ($target) {
            let _this = this;
            let dataId = $target.data('id');
            let dataType = $target.data('type');
            let dataUrl = $target.data('url');
            let urlParamObj = transferUrlParam(dataUrl);
            if (!dataType) {
                return
            }
            if (dataId == 'all') {
                delete urlParamObj[dataType];
            } else {
                urlParamObj[dataType] = dataId;
            }
            let newDataUrl = toUrlParam(urlParamObj);
            _this._setDataUrl(newDataUrl);
        },
        _multiSelectItem: function ($target) {
            let _this = this;
            let dataId = $target.data('id');
            let dataType = $target.data('type');
            let dataUrl = $target.data('url');
            let urlParamObj = transferUrlParam(dataUrl);
            let currUrlParam = urlParamObj[dataType];

            if (currUrlParam) {
                let paramList = currUrlParam.split(',');
                let index = paramList.indexOf(`${dataId}`);
                if (index > -1) {
                    paramList.splice(index, 1);
                    if (paramList.length <= 0) {
                        delete urlParamObj[dataType];
                    } else {
                        urlParamObj[dataType] = paramList.sort().join(',');
                    }
                } else {
                    paramList.push(`${dataId}`);
                    urlParamObj[dataType] = paramList.sort().join(',');
                }
            } else {
                urlParamObj[dataType] = dataId;
            }
            let newDataUrl = toUrlParam(urlParamObj);
            _this._setDataUrl(newDataUrl);
        },
        _switchSelectItem: function ($target, switchs) {
            let _this = this;
            let dataId = $target.data('id');
            let dataType = $target.data('type');
            let dataUrl = $target.data('url');
            let urlParamObj = transferUrlParam(dataUrl);
            for (const item of switchs) {
                delete urlParamObj[item];
            }
            if (dataId != 'all') {
                urlParamObj[dataType] = dataId;
            }
            let newDataUrl = toUrlParam(urlParamObj);
            _this._setDataUrl(newDataUrl);
        },
        _setDataUrl: function (dataUrl) {
            let _this = this;
            let _opt = _this.opt;
            _opt.$item.data('url', dataUrl);
            window.location.href = `http://${window.location.host}${window.location.pathname}${dataUrl}`;
        },
        _tabShowEvent: function (tab, tabData) {
            tab.on('mouseenter', function () {
                $(this).siblings().removeClass('actived');
                $(this).addClass('actived');
                let index = $(this).index();
                tabData.hide();
                tabData.eq(index).show();
            });
        }
    })
})(jQuery);

使用：

 new FCZX.list.Filter({
        filterSelecor: '#bubbleFilter',
        itemSelector: '.item-a',
        tabSelector: '.data-tab',
        tabDataSelector: '.data-tab-item',
        selectSelector: '.select-filter'
    });

图例：