web前端项目经验之《产品列表筛选》

HTML部分

    <!-- proList -->
    <div class="s2">
        <div class="container">
            <div class="pro_type">
                <div class="wrap">
                    <h2 class="pro_tit">{$content.pr_tit}</h2>
                    <div class="pro_seabox">
                        <p>{$content.pr_des}</p>

                        <div class="pro_topline"></div>
                        <!-- application -->
                        <div class="pro_typea clearfix application">
                            <div class="pro_typea_lf">
                                <b>{$content.pro_a}</b>
                            </div>
                            <div class="pro_typea_rt appsecond">

                                {empty name="catalogNames['id']"}
                                <a href="javascript:;" title="" data-id="all-product" id="all"
                                    class="active all">All</a>
                                {else/}
                                <a href="javascript:;" title="" data-id="all-product" id="all" class="all">All</a>

                                {/empty}
                                <div class="se-wrap">
                                    <div class="row">
                                        {foreach name='proType' item='vl' key='k'}
                                        {in name="k" value="0,1,2,3"}
                                        <div class="col-lg-6 col-md-6 col-xs-12 item">
                                            {eq name="catalogNames['id']" value="$vl.id"}
                                            <a href="javascript:;" data-id="{$vl.id}" class="active">{$vl.name}:</a>
                                            {else/}
                                            <a href="javascript:;" data-id="{$vl.id}">{$vl.name}:</a>
                                            {/eq}

                                            {notempty name="vl['childlist']"}
                                            <select class="mysea">
                                                {foreach name="vl['childlist']" item='vo' key='k'}
                                                <option data-id="{$vo.id}">{$vo.name}</option>
                                                {/foreach}
                                            </select>
                                            {/notempty}
                                        </div>
                                        {/in}
                                        {/foreach}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pro_line"></div>
                        <!-- discharge size -->
                        <div class="pro_typea clearfix">
                            <div class="pro_typea_lf">
                                <b>{$content.pro_b}</b>
                            </div>
                            <div class="pro_typea_rta discharge">
                                <a href="javascript:;" title="" data-id="" class="active all">All</a>
                                {foreach name='discharge' item='vo' key='k'}
                                <a href="javascript:;" title="" data-id="{$vo.id}">{$vo.key}</a>
                                {/foreach}
                            </div>
                        </div>
                        <div class="pro_line"></div>
                        <!-- power -->
                        <div class="pro_typea clearfix">
                            <div class="pro_typea_lf">
                                <b>{$content.pro_c}</b>
                            </div>
                            <div class="pro_typea_rtb power">
                                <a href="javascript:;" title="" data-id="" class="active all">All</a>
                                {foreach name='power' item='vo' key='k'}
                                <a href="javascript:;" title="" data-id="{$vo.id}">{$vo.key}</a>
                                {/foreach}
                            </div>
                        </div>
                        <div class="pro_line"></div>
                        <!-- max.flow -->
                        <div class="pro_typea clearfix">
                            <div class="pro_typea_lf">
                                <b>{$content.pro_d}</b>
                            </div>
                            <div class="pro_typea_rtb  maxflow">
                                <a href="javascript:;" title="" data-id="" class="active all">All</a>
                                {foreach name='maxflow' item='vo' key='k'}
                                <a href="javascript:;" title="" data-id="{$vo.id}">{$vo.key}</a>
                                {/foreach}
                            </div>
                        </div>
                        <div class="pro_line"></div>
                        <!-- max.head -->
                        <div class="pro_typea clearfix">
                            <div class="pro_typea_lf">
                                <b>{$content.pro_e}</b>
                            </div>
                            <div class="pro_typea_rtb maxhead">
                                <a href="javascript:;" title="" data-id="" class="active all">All</a>
                                {foreach name='maxhead' item='vo' key='k'}
                                <a href="javascript:;" title="" data-id="{$vo.id}">{$vo.key}</a>
                                {/foreach}
                            </div>
                        </div>
                        <div class="pro_topline"></div>
                    </div>
                </div>
            </div>

            <!-- 产品列表 -->
            <div class="pro-list">
                <div class="row product_box">
                    {foreach name="productList" item="vo"}
                    <div class="col-lg-3 col-md-3 col-xs-12 pro-item">
                        <a href="/p/{$vo.urlname}">
                            <div class="pro-wrap">
                                <div class="text-wrap">
                                    <p class="title">{$vo.name}</p>
                                    <p class="des">{$vo.item_no}</p>
                                </div>
                                <div class="proImg">
                                    <img src="{$vo.fengmian}">
                                </div>
                                <div class="viewMore">
                                    {$content.detail}
                                </div>
                            </div>
                        </a>
                    </div>
                    {/foreach}

                </div>
            </div>
            <!-- readmore -->

            <a href="javascript:;">
                <div class="readMore pro_mpre">
                    {$content.viewMore}
                </div>
            </a>

        </div>
    </div>

CSS部分

    // prolist
    .s2 {
        position: relative;
        background: rgba(245, 245, 245, 1);

        .container {
            padding-top: 5rem;
            padding-bottom: 4rem;
            font-size: 0;

            .pro_type {

                .pro_tit {
                    text-transform: uppercase;
                    font-size: 40px;
                    font-weight: bold;
                    color: rgba(66, 66, 66, 1);
                    margin-bottom: 1rem;
                }

                .pro_seabox {
                    width: 93%;
                    margin-left: 7%;
                }

                .pro_seabox p {
                    font-size: 18px;
                    font-weight: 400;
                    color: rgba(102, 102, 102, 1);
                    margin-bottom: 3rem;
                }

                #proform {
                    width: 900px;
                    margin-top: 20px;
                    font-size: 0;
                    margin-bottom: 50px;
                }

                .prosearch,
                .prosubmit_btn {
                    height: 60px;
                    background: whitesmoke;
                    line-height: 60px;
                    padding-left: 62px;
                    width: 80%;
                    display: inline-block;
                    vertical-align: top;
                }

                .prosubmit_btn {
                    background: #d63737;
                    padding-left: 0;
                    text-align: center;
                    width: 20%;
                    border: none;
                    outline: none;
                    font-size: 16px;
                    font-family: Exo-Regular;
                    font-weight: 400;
                    color: white;
                    line-height: 60px;
                }

                .prosubmit_btn img {
                    vertical-align: baseline;
                }

                .prosearch {
                    position: relative;
                }

                .prosearch input {
                    border: none;
                    outline: none;
                    width: 100%;
                    background-color: transparent;
                    font-size: 16px;
                    font-family: Exo-Regular;
                    font-weight: 400;
                    color: #cccccc;
                }

                .prosearch p {
                    width: 23px;
                    height: 24px;
                    opacity: .5;
                    display: block;
                    position: absolute;
                    left: 30px;
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 15;
                }

                .prosearch p img {
                    max-width: 100%;
                }

                .pro_topline,
                .pro_line {
                    width: 100%;
                    height: 2px;
                    background: black;
                    opacity: 0.2;
                }

                .pro_typea {
                    padding: 19px 0 19px;
                    font-size: 0;
                }

                .pro_typea_lf,
                .pro_typea_rt,
                .pro_typea_rta,
                .pro_typea_rtb {
                    display: inline-block;
                    vertical-align: top;
                    font-size: 16px;
                    font-weight: 400;
                    color: #424242;
                    line-height: 24px;
                }

                .pro_typea_lf b,
                .pro_typea_rt b,
                .pro_typea_rta b,
                .pro_typea_rtb b {

                    font-size: 20px;
                    font-weight: 700;
                    color: rgba(66, 66, 66, 1);
                }


                .pro_typea_rt,
                .pro_typea_rta,
                .pro_typea_rtb {
                    margin-left: 40px;
                }

                .pro_typea_rt a,
                .pro_typea_rta a,
                .pro_typea_rtb a {
                    margin-right: 0px;
                    color: #424242;
                    padding: 0 17px;
                    line-height: 30px;
                    display: inline-block;
                }

                .pro_typea_rta a:hover,
                .pro_typea_rtb a:hover {
                    background: #1565C0;
                    color: #fff;
                    text-decoration: none;
                    padding: 0 17px;
                }

                .pro_typea_rt .active,
                .pro_typea_rta .active,
                .pro_typea_rtb .active {
                    margin-right: 20px;
                    background: #1565C0;
                    color: #fff;
                    text-decoration: none;
                    padding: 0 17px;
                    line-height: 30px;
                    display: inline-block;
                }

                .pro_line {
                    height: 1px;
                }

                .application {
                    padding-top: 30px;
                }

                .pro_typea_rt {
                    width: 90%;

                    a {
                        margin-right: 0 !important;
                    }

                    .se-wrap {
                        width: 73%;
                        text-align: right;
                        display: inline-block;
                        vertical-align: top;

                        .item {
                            margin-bottom: 20px;
                            position: relative;
                        }

                        .item::after {
                            position: absolute;
                            content: "";
                            top: 4px;
                            right: 24px;
                            width: 20px;
                            height: 20px;
                            background: url("/assets/img/wy/arrow.png") no-repeat;
                            background-position: 95% 50%;
                            padding-right: 10px;
                        }

                        select {
                            position: relative;
                            width: 260px;
                            height: 30px;
                            background: rgba(235, 235, 235, 1);
                            padding-left: 10px;
                            color: #424242;
                            border: none;
                            appearance: none;
                            -moz-appearance: none;
                            -webkit-appearance: none;
                        }


                    }
                }

            }


            // 产品列表
            .pro-list {
                margin-top: 4.5rem;

                .pro-item {
                    padding-right: 10px;
                    padding-left: 10px;

                    .pro-wrap {
                        transition: 0.5s;
                        margin: 5px;
                        background: #fff;
                        padding: 20px;
                        position: relative;
                        margin-bottom: 2rem;

                        img {
                            width: 100%;
                        }

                        .text-wrap {

                            text-align: center;
                            width: 100%;

                            .title {
                                font-size: 18px;
                                font-weight: bold;
                                color: rgba(41, 42, 47, 1);
                                margin-top: 18px;
                            }

                            .des {
                                font-size: 16px;
                                font-weight: 400;
                                color: rgba(41, 42, 47, 1);
                                margin-bottom: 18px;
                            }
                        }

                        .viewMore {

                            width: 100%;
                            background: rgba(21, 101, 192, 1);
                            font-size: 14px;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);
                            line-height: 44px;
                            text-transform: uppercase;
                            text-align: center;
                            margin: 0 auto;
                            margin-top: 12px;
                        }
                    }

                    .pro-wrap:hover {
                        transition: 0.5s;
                        box-shadow: 0px 9px 16px 2px rgba(0, 0, 0, 0.15);
                    }


                }
            }

            // 加载更多
            .readMore {
                text-transform: uppercase;
                width: 320px;
                line-height: 60px;
                border: 1px solid rgba(21, 101, 192, 1);
                font-size: 16px;
                font-weight: 400;
                color: rgba(0, 0, 0, 1);
                text-align: center;
                margin: 0 auto;
                margin-top: 2rem;
            }

            .readMore:hover {
                background: #1565C0;
                color: rgba(255, 255, 255, 1);
            }
        }
    }

 

JS部分

 // 隐藏加载更多按钮
    $(document).ready(function () {
        var a = $(".pro-item").length;
        console.log(a)
        if (a < 8) {
            $(".readMore").css("display", "none");
        }
    });


    $(".header .header1 .nav-wrap .nav-wrap .nav-list .nav-item:nth-child(2) a").addClass('activea');

    var a = '';
    var aa = '';
    var b = '';
    var c = '';
    var d = '';
    var e = '';
    var num = '';
    // 二级下拉选中
    $(".mysea").change(function () {
        $(".mysea").find("option").removeClass('actic');
        $(".appsecond a").removeClass('active');
        $(this).siblings().addClass('active');
        $(this).find("option:selected").addClass('actic');
        aa = $(".mysea .actic:selected").attr('data-id');
        // a = $(".appsecond a.active").attr("data-id");
        a = "";
        b = $(".discharge a.active").attr("data-id");
        c = $(".power a.active").attr("data-id");
        d = $(".maxflow a.active").attr("data-id");
        e = $(".maxhead a.active").attr("data-id");
        Search(a, aa, b, c, d, e, num);
        num = '';
        console.log(aa);

    })

    //<!--application-- >
    $(".appsecond a").click(function (e) {
        $(".appsecond a").removeClass('active');
        $(this).addClass('active');
        a = $(".appsecond a.active").attr("data-id");
        if (a == 'all-product') {
            $("#thisCate").val('');
            a = "";
        }
        aa = "";
        b = $(".discharge a.active").attr("data-id");
        c = $(".power a.active").attr("data-id");
        d = $(".maxflow a.active").attr("data-id");
        e = $(".maxhead a.active").attr("data-id");
        $('.pro_mpre').css('display', 'block');
        Search(a, aa, b, c, d, e, num);
        num = '';
        console.log(aa);
    })

    //<!--discharge size-- >
    $(".discharge a").click(function (e) {
        $(".discharge a").removeClass('active');
        $(this).addClass('active');
        a = $(".appsecond a.active").attr("data-id");
        b = e.currentTarget.dataset.id;
        c = $(".power a.active").attr("data-id");
        d = $(".maxflow a.active").attr("data-id");
        e = $(".maxhead a.active").attr("data-id");
        $('.pro_mpre').css('display', 'block');
        Search(a, aa, b, c, d, e, num);
        num = '';
    })
    // <!--power-- >
    $(".power a").click(function (e) {
        $(".power a").removeClass('active');
        $(this).addClass('active');
        a = $(".appsecond a.active").attr("data-id");
        b = $(".discharge a.active").attr("data-id");
        c = e.currentTarget.dataset.id;
        d = $(".maxflow a.active").attr("data-id");
        e = $(".maxhead a.active").attr("data-id");
        $('.pro_mpre').css('display', 'block');
        Search(a, aa, b, c, d, e, num);
        num = '';
    })

    //<!--maxflow-- >
    $(".maxflow a").click(function (e) {
        $(".maxflow a").removeClass('active');
        $(this).addClass('active');
        a = $(".appsecond a.active").attr("data-id");
        b = $(".discharge a.active").attr("data-id");
        c = $(".power a.active").attr("data-id");
        d = e.currentTarget.dataset.id;
        e = $(".maxhead a.active").attr("data-id");
        $('.pro_mpre').css('display', 'block');
        Search(a, aa, b, c, d, e, num);
        num = '';
    })

    //<!--maxhead-- >
    $(".maxhead a").click(function (e) {
        $(".maxhead a").removeClass('active');
        $(this).addClass('active');
        a = $(".appsecond a.active").attr("data-id");
        b = $(".discharge a.active").attr("data-id");
        c = $(".power a.active").attr("data-id");
        d = $(".maxflow a.active").attr("data-id");
        e = e.currentTarget.dataset.id;
        $('.pro_mpre').css('display', 'block');
        Search(a, aa, b, c, d, e, num);
        num = '';
    })
    // more
    $('.pro_mpre').click(function () {
        num++;

        a = $(".cat_id").attr("value");
        b = $(".discharge a.active").attr("data-id");
        c = $(".power a.active").attr("data-id");
        d = $(".maxflow a.active").attr("data-id");
        e = $(".maxhead a.active").attr("data-id");
        Searcha(a, aa, b, c, d, e, num);

    })

    function Search(typea, typeaa, typeb, typec, typed, typee, num) {
        $.ajax({
            type: "post",
            url: "/product/ajaxProList",
            data: {
                'categoryone_id': typea,
                'category_id': typeaa,
                'discharge_id': typeb,
                'power_id': typec,
                'maxflow_id': typed,
                'maxhead_id': typee,
                'pre_page': num
            },
            success: function (data) {
                var str = "";
                for (var i = 0; i < data.data.length; i++) {
                    var a = [];
                    str += '<div class="col-lg-3 col-md-3 col-xs-12 pro-item">' +
                        '<a href="/p/' + data.data[i].urlname + '">' + '<div class="pro-wrap">' +
                        '<div class="text-wrap">' +
                        '<p class="title">' + data.data[i].name + '</p>' + '<p class="des">' + data.data[i]
                        .item_no + '</p>' + '</div>' +
                        ' <div class="proImg">' + '<img src="' + data.data[i].fengmian + '">' + ' </div>' +
                        ' <div class="viewMore">{$content.detail}</div>' + '</div>' + ' </a>' + ' </div>'
                }
                if (data.count < 8) {
                    $('.pro_mpre').css('display', 'none');
                }
                $('.product_box').html(str);
            },
            error: function (e) {}
        })
    }

    function Searcha(typea, typeaa, typeb, typec, typed, typee, num) {
        $.ajax({
            type: "post",
            url: "/product/ajaxProList",
            data: {
                'categoryone_id': typea,
                'category_id': typeaa,
                'discharge_id': typeb,
                'power_id': typec,
                'maxflow_id': typed,
                'maxhead_id': typee,
                'pre_page': num
            },
            success: function (data) {
                var str = "";
                for (var i = 0; i < data.data.length; i++) {
                    var a = [];
                    str += '<div class="col-lg-3 col-md-3 col-xs-12 pro-item">' +
                        '<a href="/product/detail/id/' + data.data[i].id + '">' + '<div class="pro-wrap">' +
                        '<div class="text-wrap">' +
                        '<p class="title">' + data.data[i].name + '</p>' + '<p class="des">' + data.data[i]
                        .item_no + '</p>' + '</div>' +
                        ' <div class="proImg">' + '<img src="' + data.data[i].fengmian + '">' + ' </div>' +
                        ' <div class="viewMore">{$content.detail}</div>' + '</div>' + ' </a>' + ' </div>'
                }
                if (data.count < 8) {
                    $('.pro_mpre').css('display', 'none');
                }
                $('.product_box').append(str);
            },
            error: function (e) {}
        })
    }

来源：CSDN

作者：吴小花的博客

链接：https://blog.csdn.net/weixin_39089928/article/details/103235768