模仿淘宝商品页面 数量选购
HTML代码结构如下:
<small><span class="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谢谢!!!!!