网店常用的商品属性选择功能(JQuery)

最新推荐文章于 2019-09-25 12:01:04 发布

michaelgong

最新推荐文章于 2019-09-25 12:01:04 发布

阅读量2.7k

点赞数

分类专栏： Jquery 文章标签： jquery function div float border class

本文链接：https://blog.csdn.net/michaelgong/article/details/7008115

版权

Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<head>
    <title>网店常用的商品属性选择功能</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <script src="../js/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            background-color: #FFF;
            color: #000;
            text-align: center;
            font: normal 12px Arial,Helvetica,sans-serif;
        }
        ul, li
        {
            list-style-type: none;
        }
        img
        {
            border: 0;
        }
        h1, h2, h3, h4, h5, h6, div, p, li, td, th
        {
            text-align: left;
        }
        a:link, a:visited, a:hover
        {
            text-decoration: none;
            color: #000;
            padding: 3px;
        }
        a:hover
        {
            text-decoration: underline;
            background-color: #F1F1F1;
            color: #C80000;
        }
        .md
        {
            margin: 10px auto;
            width: 96%;
            padding: 5px;
            border: 1px solid #c1c1c1;
            overflow: hidden;
        }
        .hd, .bd
        {
            margin: 0 auto;
            width: 100%;
            overflow: hidden;
            height: 34px;
        }
        .hd
        {
            height: 30px;
            line-height: 30px;
            background-color: #F1F1F1;
            overflow: hidden;
        }
        .hd h2
        {
            float: left;
            font-size: 14px;
            text-indent: 10px;
        }
        .hd span
        {
            float: left;
            margin-right: 5px;
            margin-top: 3px;
            display: inline;
            height: 16px;
            line-height: 16px;
            padding: 3px;
            border: 1px solid #ccc;
        }
        .bd h3
        {
            float: left;
            width: 60px;
            font-size: 12px;
            text-align: right;
            padding: 5px 0;
            height: 24px;
            line-height: 24px;
            overflow: hidden;
        }
        .bd ul
        {
            float: left;
            width: 530px;
            overflow: hidden;
            padding: 5px 0;
        }
        .bd li
        {
            float: left;
            height: 24px;
            line-height: 24px;
            padding-right: 10px;
            overflow: hidden;
        }
        .addBackgroundcolor
        {
            background-color: gray;
        }
    </style>
    <script type="text/javascript">
        var str = "";
        $(document).ready(function () {
            var Items = new Array("SizeDiv", "ColorDiv", "PrizeDiv");
            for (var j = 0; j < Items.length; j++) {
                $("#" + Items[j]).find("a").each(function () {
                    var yy = "#" + Items[j];
                    $(this).click(function () {
                        choiseGoodsType($(this), yy);
                    });
                });
            }
        });
        function choiseGoodsType(Name, div) {
            $(div).find("a").each(function (i) {
                if ($(Name).attr("id").split('_')[1] == "NOT") {
                    $(div).find("a").removeClass("addBackgroundcolor");
                } else {
                    if ($(this).text() == $(Name).text()) {
                        $(Name).addClass("addBackgroundcolor");

                    } else {
                        $(this).removeClass("addBackgroundcolor");
                    }
                }
                document.getElementById("FootDiv").innerHTML = "";
                document.getElementById("FootDiv").innerHTML = ArrayStr($(Name).text(), div);
            });
        }
        function ArrayStr(name, div) {
            
            str = "";
            document.getElementById("FootDiv").innerHTML = "";
            var NameType = "";
            $("li .addBackgroundcolor").each(function () {
                if ($(this).attr("id") == "SD") {
                    NameType = "[尺寸]:";
                } else if ($(this).attr("id") == "CD") {
                    NameType = "[颜色]:";
                }
                else if ($(this).attr("id") == "PD") {
                    NameType = "[价格]:";
                }
                str += "<li><span style='font-wight:bold;color:green'>" + NameType + "</span>" + $(this).text() + ":" + "</li>";
            });
            return str;

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="md" id="select">
        <h4>
            您筛选的条件是：</h4>
        <div id="FootDiv" class="bd ul">
        </div>
        <div class="bd">
            <h3 id="size">
                尺寸：</h3>
            <ul id="SizeDiv">
                <li><a href="#S" id="SD">S(小号)</a></li>
                <li><a href="#M" id="SD">M(中号)</a></li>
                <li><a href="#L" id="SD">L(大号)</a></li>
                <li><a href="#XL" id="SD">XL(加大号)</a></li>
                <li><a href="#XXL" id="SD">XXL(加加大号)</a></li>
                <li><a href="#Not" id="SD_NOT">无尺寸限制</a></li>
            </ul>
        </div>
        <div class="bd">
            <h3 id="color">
                颜色：</h3>
            <ul id="ColorDiv">
                <li><a href="#white" id="CD">白色</a></li>
                <li><a href="#black" id="CD">黑色</a></li>
                <li><a href="#red" id="CD">红色</a></li>
                <li><a href="#yellow" id="CD">黄色</a></li>
                <li><a href="#orange" id="CD">橙色</a></li>
                <li><a href="#blue" id="CD">蓝色</a></li>
                <li><a href="#Not" id="CD_NOT">无颜色限制</a></li>
            </ul>
        </div>
        <div class="bd">
            <h3 id="prize">
                价格：</h3>
            <ul id="PrizeDiv">
                <li><a href="#50" id="PD">50</a></li>
                <li><a href="#50-100" id="PD">51-100</a></li>
                <li><a href="#101-200" id="PD">101-200</a></li>
                <li><a href="#201-300" id="PD">201-300</a></li>
                <li><a href="#301-400" id="PD">301-400</a></li>
                <li><a href="#401" id="PD">400以上</a></li>
                <li><a href="#Not" id="PD_NOT">无价格限制</a></li>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>