web前端入門到實(shí)戰(zhàn)：制作仿京東商城-商品列表商品篩選功能

發(fā)布時(shí)間：2020-08-05 21:39:05 來(lái)源：網(wǎng)絡(luò) 閱讀：252 作者：前端向南欄目：web開發(fā)

這次實(shí)現(xiàn)一個(gè)仿京東商城-商品列表商品篩選的功能

一、html代碼

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class='container'>
    <div class='filter'>
        <span>已選條件：</span>
        <div class='itme'>
            <!-- <a>
                ×  <span>惠普</span>
            </a> -->
        </div>
    </div>
    <div class='store'>
        <dl>
            <dt>品牌：</dt>
            <dd><div><a>全部</a></div></dd>
            <dd><div><a>惠普(hp)</a></div></dd>
            <dd><div><a>聯(lián)想(Lenovo)</a></div></dd>
            <dd><div><a>聯(lián)想(ThinkPad)</a></div></dd>
            <dd><div><a>宏基(acer)</a></div></dd>
            <dd><div><a>華碩</a></div></dd>
            <dd><div><a>戴爾</a></div></dd>
            <dd><div><a>三星</a></div></dd>
            <dd><div><a>索尼</a></div></dd>
            <dd><div><a>東芝</a></div></dd>
            <dd><div><a>Gateway</a></div></dd>
            <dd><div><a>微星</a></div></dd>
            <dd><div><a>海爾</a></div></dd>
            <dd><div><a>清華同方</a></div></dd>
            <dd><div><a>富士通</a></div></dd>
            <dd><div><a>蘋果(Apple)</a></div></dd>
            <dd><div><a>神舟</a></div></dd>
            <dd><div><a>方正</a></div></dd>
            <dd><div><a>優(yōu)雅</a></div></dd>
        </dl>
        <dl>
            <dt>價(jià)格：</dt>
            <dd><div><a>全部</a></div></dd>
            <dd><div><a>1000-2999</a></div></dd>
            <dd><div><a>3000-3499</a></div></dd>
            <dd><div><a>3500-3999</a></div></dd>
            <dd><div><a>4000-4499</a></div></dd>
            <dd><div><a>4500-4999</a></div></dd>
            <dd><div><a>5000-5999</a></div></dd>
            <dd><div><a>6000-6999</a></div></dd>
            <dd><div><a>7000-9999</a></div></dd>
            <dd><div><a>10000以上</a></div></dd>
        </dl>
        <dl>
            <dt>尺寸：</dt>
            <dd><div><a>全部</a></div></dd>
            <dd><div><a>8.9英寸及以下</a></div></dd>
            <dd><div><a>11英寸</a></div></dd>
            <dd><div><a>12英寸</a></div></dd>
            <dd><div><a>13英寸</a></div></dd>
            <dd><div><a>14英寸</a></div></dd>
            <dd><div><a>15英寸</a></div></dd>
            <dd><div><a>16英寸-17英寸</a></div></dd>
        </dl>
        <dl>
            <dt>平臺(tái)：</dt>
            <dd><div><a>全部</a></div></dd>
            <dd><div><a>AMD Brazos APU平臺(tái)</a></div></dd>
            <dd><div><a>Intel Sandy Bridge平臺(tái)</a></div></dd>
            <dd><div><a>Intel平臺(tái)</a></div></dd>
            <dd><div><a>AMD平臺(tái)</a></div></dd>
        </dl>
        <dl>
            <dt>顯卡：</dt>
            <dd><div><a>全部</a></div></dd>
            <dd><div><a>獨(dú)立顯卡</a></div></dd>
            <dd><div><a>集成顯卡</a></div></dd>
            <dd><div><a>核芯顯卡</a></div></dd>            
        </dl>
    </div>
</div>
<script type="text/javascript" src='js/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
var arr = [];
$(function(){

    $(".store dt+dd a").attr("class",'all-color');
    $(".store a").click(function(){
        $(this).parents("dl").children('dd').each(function(){
            $(this).children('div').children('a').removeClass("all-color")
        })
        $(this).attr("class",'all-color');

        $(this).parentsUntil("dl").parent().hide();

        arr.push($(this));
        var val = $(this).html();

        var domItem = `<a 
                            onclick=deletes('${val}')
                            rel='${val}'
                        >
                        ×  <span>${val}</span>
                       </a>`;
        $(".itme").append(domItem);
    })

})
function deletes(val){

    $(".filter").find("a[rel='"+val+"']").remove();
    for(var i=0;i<arr.length;i++){
        if(arr[i].html() == val ){
            arr[i].parentsUntil("dl").parent().show();
            arr.splice(i,1);
            i--;
        }else{
            arr[i].parentsUntil("dl").parent().hide();
        }
    }

}

</script>
</body>
</html>
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 767-273-102 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

二、css代碼

*{margin:0;padding:0;}
ul{list-style: none;}
a{text-decoration: none;cursor:pointer;}
.container{
    width:720px;
    margin:20px auto 0 auto;
    border-width: 2px 1px 0 1px;
    border-color: #ff5500 #ccc #ccc #ccc;
    border-style:solid;
}
.filter{
    padding:10px 0 10px 36px;
    background: #f2f2f2;
    border-bottom:1px solid #ccc;
    font-size:14px;
    display: flex;
}
.itme{
    margin-left:10px;
}
.itme a{
    padding:0 10px;
    margin:0 5px;
    border:1px solid #ff5500;
    border-radius: 5px;
    background: #fff;
    color:red;
}
.store dl{
    padding: 0 0 15px 110px;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    font-size:12px;
}
.store dl dt{
    width:110px;
    margin:15px 0 0 -110px;
    text-align: right;
    line-height: 16px;
    font-size:14px;
    color:#404040;
    font-weight: bold;
}
.store dl dd{
    margin:12px 18px 0 0;
}
.all-color{
    background: blue;
    color:#fff;
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 767-273-102 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）

向AI問(wèn)一下細(xì)節(jié)

web前端入門到實(shí)戰(zhàn)：制作仿京東商城-商品列表商品篩選功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽