模仿淘宝商品页面 数量选购

HTML代码结构如下:

<small><span class="minus">&minus;</span><label class="number">1</label><span class="plus">+</span></small>件(库存1869件)

js代码结构如下:

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
        $(function () {
            var n = parseInt($(".number")[0].innerText);
            $(".plus").on("click",function () {
                n = n + 1;
                $(".number")[0].innerText = n;
                $(".minus").css({color:"#000000"});
            });
            $(".minus").on("click",function () {
                if (n <= 1){
                    $(".minus").css({color:"#cccccc"});
                    $(".minus").removeAttr('onclick');
                }
                else {
                    n = n - 1;
                    $(".number")[0].innerText = n;
                }
            })
        })
    </script>

CSS样式代码结构如下:

.dPri_count>small {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 40px;
}
.dPri_count>small>span {
    display: inline-block;
    vertical-align: middle;
    background: #ededed;
    font-size: 24px;
    font-weight: bold;
    width: 29px;
    height: 29px;
    text-align: center;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    line-height: 25px;
    cursor: default;
}
.dPri_count>small>.minus{
    color: #cccccc;
}
.dPri_count>small>label {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 27px;
    width: 48px;
    height: 27px;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    font-weight: bold;
}

O(∩_∩)O谢谢!!!!!

posted @ 2017-09-05 11:19  土地情缘  阅读(296)  评论(0编辑  收藏  举报