筛选

(function(){
    var selectBox = $(".select_list");
    var moveSelectBtn = selectBox.find(".more_select");
    var selectItem = selectBox.find(".list");
    var facilityBox = $(".facility_demo");
    var selectBoxHeight = selectItem.outerHeight(true);
    var targetA = selectItem.find("a");
    var arr = [];
    var newArr = [];
    var current;
    var flag = true;
    var tick = true;
    var iThis = 0;

    moveSelectBtn.on("click",
    function() {
        if (flag) {
            selectBox.css({
                "height": selectBoxHeight
            });
            moveSelectBtn.html("<em></em><i></i>关闭");
            flag = false;
        } else {
            selectBox.css({
                "height": "65px"
            });
            moveSelectBtn.html("<em></em><i></i>更多选项");
            flag = true;
        }
    })

    /*
    * 实现url为#tag=20,30,50 这种形式的点击显示.
    * @ clickOption {Function}  点击搜索条件
    * @ getHash {Function}  获取url上的hash数据, 格式为[20, 30, 50]
    * @ listValUnset {Function}  检查数组是否已设置数字，重复将其去掉
    * @ changeSearchOptionChecked {Function}  改变搜索选项的选中状态，添加className
    * @ viewChange {Function}   列表的显示
    * @ getUrlOption {Function}   页面加载时url上的hash显示
    */


    /*
    * @ clickOption 点击搜索条件
    * @ 步骤1： 点击获取a标签上的data-value值，push进数组中
    * @ 步骤2： 检查数组中是否已经push了此data-value值, 如果有，如果有全部去掉
    * @ 步骤3： 改变url地址上的hash数据
    * @ 步骤4： 调用changeSearchOptionChecked函数改变搜索的选中状态
    * @ 步骤5： 调用viewChange函数显示要符合条件的列表
    */

    var clickOption = function(){
        selectItem.on("click", "a", function(){
            var $$ = $(this);
            var tagVal = parseInt($$.data("value"), 10);
            var $_HASH = getHash();         // 转化为#tag=20,30,50的格式

            // 如果hash不存在tags, 新建一个数组
            if(!$_HASH["tags"]){
                $_HASH["tags"] = [];
            }

            // 点击搜索上的data在数组中找到
            if(jQuery.inArray(tagVal, $_HASH["tags"]) >= 0){
                $_HASH["tags"] = listValUnset($_HASH["tags"], tagVal);
            }else{
                $_HASH["tags"].push(tagVal);
            }
            // 设置url上的hash数据
            var newHash = "tags=" + $_HASH["tags"].join(",");
            window.location.hash = newHash;         // 设置为#tag=20,30,50的格式
            changeSearchOptionChecked($_HASH);
            viewChange($_HASH);
        })
    }
    clickOption();

    /*
    * @ viewChange 列表的显示
    * @ 步骤1：找到符合条件的搜索激活状态，添加className, 显示列表的className对应data-value的值一一显示
    * @ 步骤2：列表的className形式为 "tag_20", 20是对应的data-value值
    */
    var viewChange = function($_HASH){
        var selecter = "";
        // 显示列表的className对应data-value的值一一显示
        if($_HASH["tags"] && $_HASH["tags"].length > 0){
            // 循环数组
            for(var i = 0; i < $_HASH["tags"].length; i++){
                // 找到符合条件的搜索激活状态，添加className
                selecter += ".tag_" + $_HASH["tags"][i];
            }
        }else{
        }

        // 不为空
        if(selecter != ""){
            console.log("不为空")
            
            // 符合条件的显示
            $('.list_view').find("li" + selecter).show();
            $('.list_view').find("li" + selecter).parents(".show_item").show();
            $(".show_item").find(".tit").hide();
            $('.list_view').find("li" + selecter).parents(".show_item").find(".tit").show();

            // 不符合条件的隐藏
            $('.list_view').find("li:not(" + selecter + ")").hide();
            if(selecter == ".tag_NaN"){
                console.log(".tag_NaN")
                $('.show_item').show();
                $(".show_item").find(".tit").show();
                $('.list_view').find("li").show();
            }
        }else{
            $('.show_item').show();
            $(".show_item").find(".tit").show();
            $('.list_view').find("li").show();
        }

        // 显示符合条件的数字
        var totalCnt = $(".facility_demo .list_view").find('li.row').length;
        var viewCnt = $(".facility_demo .list_view").find('li.row').not(':hidden').length;
        $('.total_num').text("共" + viewCnt + "个项目结果");
    }

    /*
    * @ listValUnset 检查数组是否已设置数字，如果有全部去掉
    * @ param {list} 数组
    * @ param {v}    数组的元素
    * @ 实现 console.log(listValUnset(["1","2"],"1"));  listValUnset = ["2"]
    */
    var listValUnset = function(list, v) {
        for (i = 0; i < list.length; i++) {
            if (list[i] == v) {             // 检查数组中是否存在此数字
                list.splice(i, 1);          // 将此数字删除
            }
        }
        return list;
    };
    // console.log(listValUnset(["1","2"],"1"))


    /*
    * @ changeSearchOptionChecked 改变搜索选项的选中状态，添加className
    * @ param {$_HASH}  从url上的hash数据传过来的数组
    */
    var changeSearchOptionChecked = function($_HASH){
        // 先全部去掉搜索的选中激活状态
        selectItem.find("a").removeClass("checked");

        // 判断数组中是否有数据
        if($_HASH["tags"] && $_HASH["tags"].length > 0){
            // 循环数组
            for(var i = 0; i < $_HASH["tags"].length; i++){
                // 找到符合条件的搜索激活状态，添加className
                selectItem.find('a[data-value="' + $_HASH["tags"][i] + '"]').addClass("checked");
            }
        }
    }

    /*
    * @ getHash 获取url上的hash数据
    * @ 实现：格式为[20, 30, 50]
    */
    var getHash = function(){
        var $_HASH = [];
        // 判断url是否有#数据
        if(location.hash){
            var hashTag = location.hash.replace(/#/gi, "");
            var getList = hashTag.split("$");

            for(var i = 0; i < getList.length; i++){
                // 从tag= 开始分离
                var l = getList[i].split("=");
                // l[1] 是分离后的点击数据，格式为20,30,50
                if(l[1] != ""){
                    // 转化为数据
                    var val = l[1].split(",");
                    var valArray = [];
                    // 实例化为数字数组, valArray格式为[20, 30, 50]
                    for(var i = 0; i < val.length; i++){
                        valArray.push(parseInt(val[i], 10));
                    }
                    // $_HASH[l[0]] 是 "tag="
                    $_HASH[l[0]] = valArray;
                }
            }
        }
        return $_HASH;
    }

    // 获取url上的hash值来显示列表
    var getUrlOption = function() {
        var hashTag = window.location.hash.replace(/#tags=/gi, "").split(",");
        var newArray = [];
        var obj = {
            tags: []
        };
        for(var i = 0; i < hashTag.length; i++){
            obj.tags.push(parseInt(hashTag[i], 10));
        }
        changeSearchOptionChecked(obj);
        viewChange(obj);
    }
    getUrlOption();
}());