商品價格篩選

阿新 • • 發佈：2021-11-03

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.min.js"></script>
        <script src="bootstrap/bootstrap/js/jquery/2.0.0/jquery.min.js"></script>
        <link href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet" />
        <script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <style>
        div.categoryPageDiv{
            max 
-width: 1200px;
            margin: 10px auto;
            
        }
        div.categorySortBar{
            margin: 40px 20px 20px 20px;
            background-color: #F9F9F9;
            padding: 4px;
        }
        table.categorySortBarTable{
            display: inline-block;
        }
        span.glyphicon{
            font 
-size: 10px;
        }
        table.categorySortBarTable td{
            height: 17px;
            font-size: 12px;
            border: 1px solid #CCCCCC;
            padding: 3px;
        }
        table.categorySortBarTable
        td.grayColum
        {
            background-color: lightgray;
        }
        
        table.categorySortBarTable td input{
            height: 15px;
            width: 200px;
            border 
-width: 0px;
            outline: none;
        }
        table.categorySortBarTable td a{
            color: #999;
        }
        table.categorySortBarTable td a:hover{
            color: #C40000;
        }
        table.categorySortBarTable td.PriceMinddleColum{
            color: #CCCCCC;
            width: 5px;
        }
        table.categorySortBarTable td:hover{
            color: lightgray;
        }
        div.b3{
            background-color: #F9F9F9;
            padding: 4px;
            margin-left: 190px;
            width: 990px;
        }
        div.b3 table tr td a{
            margin-left: 20px;
        }
        table.categorySortBarTable{
            display: inline-block;
            
        }
        body{
            font-size:12px ;
            font-family: arial;
        }
        div.categoryPageDiv{
            
            max-width: 1030px;
            margin: 10px auto;
            
        }
        div.categoryProducts{
            padding: 0px 20px 40px 20px;
        }    
        div.productUnit{
            width: 225px;
            height: 450px;
            border: 3px solid #FFFFFF;
            background-color: white;
            margin: 12px 5px;
            float: left;
        }
        div.productUnit:hover{
            border: 3px solid #C40000;
        }
        img.productImg{
            width: 220px;
            height:300px ;
        }
        span.productPrice{
            font-size: 20px;
            display: block;
            scrollbar-3dlight-color: #cc00000;
            padding-left: 4px;
        }
        a.productLink{
            display: block;
            height: 34px;
            margin: 10px 0px;
            color: #333333;
        }
        a.productLink:hover{
            margin: 10px 0px;
            color:#999999;
            display: block;
            text-decoration: underline;
        } 
        a.tmallLink{
            margin: 10px 0px;
            color: #999999;
            display: block;
            text-decoration: underline;
        }
        div.productInfo{
            border-top: 1px solid #EEEEEE;
            color: #999999;
        }
        div.productInfo span.productReviewNumber{
            font-weight: bold;
            color: #b57c5b;
        }
        div.prodcut span.prodcutReviewNumber{
            font-weight: bold;
            color:cornflowerblue;
        }
        div.productInfo span.monthDeal,div.productInfo span.productReview{
            display: inline-block;
            width: 90px;
            height: 20px;
            padding-top:5px;
            padding-left: 5px;
        }
        div.prodcutInfo span.wangwang{
           padding-left: 3px;
        }
        span.productPrice{
            color: #C40000;
        }
        .productDealNumber{
            margin-left: 10px;
            color: deepskyblue;
        }
        .productReview{
            margin-left: 10px;
        }
        .productReviewNumber{
            margin-left: 10px;
            color: red;
        }
    </style>
    
    </head>
    <body>
        <script>
        $(function() {
                        //給兩個輸入框新增keyup事件
                        //因為要獲取值，所以不能用keydown和keypress事件做監聽
                        //因為這兩個事件只能獲取到我們按鍵點選之前的值
                        $("input.sortBarPrice").keyup(function(){
                            var num=$(this).val();
                            //然後獲取數值，如果為空
                            //那麼把所有的產品展示出來
                            if(num.length==0){
                                $("div.productUnit").show();
                                return;
                            }
                            
                            //接著判斷輸入的值，是否是數字，如果不是數字，或者是負數就顯示1
                            num=parseInt(num);
                            if(isNaN(num)){
                                num=1;
                            }
                            if(num<=0){
                                num=1;
                            }
                            $(this).val(num);//賦值輸出結果
                            
                            var begin=$("input.beginPrice").val();
                            var end=$("input.endPrice").val();
                            
                            //首先產品要有自定義屬性price
                            if(!isNaN(begin)&&!isNaN(end)){
                                //隱藏所有的產品項
                                $("div.productUnit").hide();
                                //遍歷每一個產品項
                                $("div.productUnit").each(function(){
                                    var price=$(this).attr("price");
                                    //產品的價格在開始和結束價格區間之內，我們把它顯示出來
                                    price = new Number(price);
                                    if(price>=begin&&price<=end){
                                        $(this).show();
                                    }
                                })
                            }
                        })
                    })

        </script>
        
        <div class="categoryPageDiv">
            <img src="img/72.jpg">
            <div class="categorySortBar">
                <table class="categorySortBarTable">
                    <tr>
                        <td class="grayColor"><a href="#">綜合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#">人氣<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#">銷量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                        <td><a href="#">價格<span class="glyphicon glyphicon-arrow-down"></span></a></td>
                    </tr>
                </table>
                
                <table class="categorySortBarTable">
                    <td><input type="text" placeholder="請輸入" class="sortBarPrice beginPrice"></td>
                    <td class="grayColum PriceMinddleColum"></td>
                    <td><input type="text" placeholder="請輸入" class="sortBarPrice endPrice"></td>
                </table>
                </div>
                </div>
                
                <div class="categoryPageDiv">
                    
                    <div class="categoryProducts">
                    
                    <div class="productUnit" price="399.02">
                    
                    <a href="#">
                        <img src="img/愛馬仕.jpg"  class="productImg" />
                    </a>
                    
                    <span class="productPrice">
                        399.02
                    </span>
                    
                    <a href="#" class="productLink">
                        【尋香禮遇】Hermes愛馬仕橘彩星光女士香水 女士淡香持久 官方正品
                    </a>
                    
                    <a href="#" class="tmallLink">天貓專賣</a>
                    
                    <div class="show1 productInfo"></div>
                    
                    <span class="monthDeal">月成交<span class="productDealNumber">17筆</span></span>
                    <span class="productReview">評價<span class="productReviewNumber">14</span></span>
                    
                    </div>
                    
                    <div class="productUnit" price="499.02">
                    
                    <a href="#">
                        <img src="img/阿瑪尼.jpg" width="300px" height="300px" class="productImg" />
                    </a>
                    
                    <span class="productPrice">
                        499.02
                    </span>
                    
                    <a href="#" class="productLink">
                        Armani/阿瑪尼紅管口紅絲絨啞光脣釉405/214
                    </a>
                    
                    <a href="#" class="tmallLink">天貓專賣</a>
                    
                    <div class="show1 productInfo"></div>
                    
                    <span class="monthDeal">月成交<span class="productDealNumber">17筆</span></span>
                    <span class="productReview">評價<span class="productReviewNumber">14</span></span>
                    
                    </div>
                    
                    <div class="productUnit" price="599.02">
                    
                    <a href="#">
                        <img src="img/CREED.jpg" width="100px" height="100px" class="productImg" />
                    </a>
                    
                    <span class="productPrice">
                        599.02
                    </span>
                    
                    <a href="#" class="productLink">
                        官方正品】CREED銀色山泉香水 清新海洋木香調香水50/100ml
                    </a>
                    
                    <a href="#" class="tmallLink">天貓專賣</a>
                    
                    <div class="show1 productInfo"></div>
                    
                    <span class="monthDeal">月成交<span class="productDealNumber">17筆</span></span>
                    <span class="productReview">評價<span class="productReviewNumber">14</span></span>
                    
                    </div>
                    <div class="productUnit" price="699.02">
                    
                    <a href="#">
                        <img src="img/祖馬龍.jpg" width="100px" height="100px" class="productImg" />
                    </a>
                    
                    <span class="productPrice">
                        699.02
                    </span>
                    
                    <a href="#" class="productLink">
                        祖馬龍鼠尾草與海鹽香水 清新Jo Malone London
                    </a>
                    
                    <a href="#" class="tmallLink">天貓專賣</a>
                    
                    <div class="show1 productInfo"></div>
                    
                    <span class="monthDeal">月成交<span class="productDealNumber">17筆</span></span>
                    <span class="productReview">評價<span class="productReviewNumber">14</span></span>
                    <span class="wangwang">
                        <a href="#" class="wangwangLink">
                            <img src="wangwang.png" />
                        </a>
                    </span>
                    </div>
                    <div class="productUnit" price="799.02">
                    
                    <a href="#">
                        <img src="img/CREED.jpg" width="100px" height="100px" class="productImg" />
                    </a>
                    
                    <span class="productPrice">
                        799.02
                    </span>
                    
                    <a href="#" class="productLink">
                        【官方正品】CREED銀色山泉香水 清新海洋木香調香水50/100ml
                    </a>
                    
                    <a href="#" class="tmallLink">天貓專賣</a>
                    
                    <div class="show1 productInfo"></div>
                    
                    <span class="monthDeal">月成交<span class="productDealNumber">17筆</span></span>
                    <span class="productReview">評價<span class="productReviewNumber">14</span></span>
                    
                    </div>
                    <div class="productUnit" price="299.02">
                    
                    <a href="#">
                        <img src="img/YSL.jpg" width="100px" height="100px" class="productImg" />
                    </a>
                    
                    <span class="productPrice">
                        299.02
                    </span>
                    
                    <a href="#" class="productLink">
                        YSL聖羅蘭小金條細管口紅 啞光新色1966紅棕色21
                    </a>
                    
                    <a href="#" class="tmallLink">天貓專賣</a>
                    
                    <div class="show1 productInfo"></div>
                    
                    <span class="monthDeal">月成交<span class="productDealNumber">17筆</span></span>
                    <span class="productReview">評價<span class="productReviewNumber">14</span></span>
                    <span class="wangwang">
                        <a href="#" class="wangwangLink">
                            <img src="wangwang.png" />
                        </a>
                    </span>
                    </div>
                    <div class="productUnit" price="199.02">
                    
                    <a href="#">
                        <img src="img/紀梵希-1.jpg" width="100px" height="100px" class="productImg" />
                    </a>
                    
                    <span class="productPrice">
                        199.02
                    </span>
                    
                    <a href="#" class="productLink">
                        【會員節】GIVENCHY紀梵希小羊皮口紅半啞光脣膏333 37 正紅色
                    </a>
                    
                    <a href="#" class="tmallLink">天貓專賣</a>
                    
                    <div class="show1 productInfo"></div>
                    
                    <span class="monthDeal">月成交<span class="productDealNumber">17筆</span></span>
                    <span class="productReview">評價<span class="productReviewNumber">14</span></span>
                    
                    </div>
                    <div class="productUnit" price="999.02">
                    
                    <a href="#">
                        <img src="img/雅詩蘭黛.jpg" width="100px" height="100px" class="productImg" />
                    </a>
                    
                    <span class="productPrice">
                        999.02
                    </span>
                    
                    <a href="#" class="productLink">
                        雅詩蘭黛口紅傾慕啞光脣膏 333 紅棕色666 絲絨啞光
                    </a>
                    
                    <a href="#" class="tmallLink">天貓專賣</a>
                    
                    <div class="show1 productInfo"></div>
                    
                    <span class="monthDeal">月成交<span class="productDealNumber">17筆</span></span>
                    <span class="productReview">評價<span class="productReviewNumber">14</span></span>
                    
                    </div>
                </div>
            </div>
    </body>
</html>