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


    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谢谢!!!!!

  • 相关阅读:
    项目选题报告答辩总结
    项目UML设计(团队)
    项目选题报告答辩总结
    第七次作业
    结对第二次
    第四次作业
    alpha冲刺4
    alpha冲刺3
    alpha冲刺2
    alpha冲刺1
  • 原文地址:https://www.cnblogs.com/zxn-9588/p/7477710.html
Copyright © 2020-2023  润新知