I'm 大宝

JQuery多条件筛选 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>多条件筛选</title>
    <script type="text/javascript" src="/_skins/hnxq/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        //获取URL参数
        function getQueryStringRegExp(name) {
            var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
            if (reg.test(location.href)) return decodeURI(RegExp.$2.replace(/\+/g, " ")); return "";
        };
        //加载页面时由URL参数为条件给对应标签添加样式
        function Load(cssid, url) {
            $(".conleft #" + cssid + " a").each(function () {
                var s = $(this).text();
                if (!url) {
                    if ($(this).text() == "全部")
                        $(this).attr("class", "red");
                }
                else if (url == s) {
                    $(this).attr("class", "red");
                    return false;
                }
            });
        };
        //拼接参数字符串
        function GetUrl() {
            var url = "";
            var type = $("#type a[class='red']").text();
            var name = $("#name a[class='red']").text();
            var sex = $("#sex a[class='red']").text();
            url = "?type=" + encodeURI(type) + "&name=" + encodeURI(name) + "&sex=" + encodeURI(sex);
            return url;
        }
        $(document).ready(function () {
            var stype = getQueryStringRegExp('type');
            var sname = getQueryStringRegExp('name');
            var sex = getQueryStringRegExp('sex');
            //$(".conleft dt+dd a").attr("class", "red"); 
            Load("type", stype);
            Load("name", sname);
            Load("sex", sex);
            $(".conleft a").click(function () {
                $(this).parents("dl").children("dd").each(function () {
                    $(this).find("a").removeClass("red");
                });

                $(this).attr("class", "red");
                location.href = GetUrl();
            });
        });        
    </script>
    <style type="text/css">
        .red
        {
            color: #ff0000;
        }
        .conleft dl
        {
            float: left;
            width: 200px;
            margin-left: 15px;
            display: inline;
            margin-top: 15px;
        }
        .conleft dl dt
        {
            color: #666;
            font-weight: normal;
        }
        .conleft dl dd
        {
            float: left;
            margin-top: 5px;
            line-height: 23px;
        }
        .conleft dl dd a
        {
            margin-right: 15px;
        }
        .conleft dl dd b
        {
            color: #DB0000;
        }
    </style>
</head>
<body>
    <div class="conleft">
        <dl id="type">
            <dt>品牌：</dt>
            <dd>
                <a>全部</a> <a>惠普(hp)</a> <a>联想(Lenovo)</a> <a>联想(ThinkPad)</a> <a>宏基(acer)</a> <a>华硕</a>
                <a>戴尔</a> <a>三星</a> <a>索尼</a> <a>东芝</a> <a>Gateway</a> <a>微星</a> <a>海尔</a> <a>清华同方</a>
                <a>富士通</a> <a>苹果(Apple)</a> <a>神舟</a> <a>方正</a> <a>优雅</a><a>常香玉</a>
            </dd>
        </dl>
        <dl id="name">
            <dt>价格：</dt>
            <dd>
                <a>全部</a> <a>1000-2999</a> <a>3000-3499</a> <a>3500-3999</a> <a>4000-4499</a> <a>4500-4999</a>
            </dd>
        </dl>
        <dl id="sex">
            <dt>尺寸：</dt>
            <dd>
                <a>全部</a> <a>8.9英寸及以下</a> <a>11英寸</a> <a>12英寸</a> <a>13英寸</a> <a>14英寸</a> <a>15英寸</a>
                <a>16英寸-17英寸</a>
            </dd>
        </dl>
    </div>
</body>
</html>
Tags: HTML, jQuery

上一篇‡: [转]7个你不知道的WP7开发工具

下一篇‡: [转]控制Repeater每行显示条数

最近回复