<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> .left { float: left; } .right { float: right; } .abled { color: #db3652; }/*可点击*/ .disabled { background: #e7e7e7; color: #000; }/*不可点击*/ .settle { overflow: hidden; } input { width: 40px; height: 30px; border: 2px solid #e7e7e7; border-left: 0px; border-right: 0px; text-align: center; padding:0px;} span { font-size: 1.4em; width: 30px; height: 30px; line-height: 26px; border: 2px solid #e7e7e7; text-align: center; } span.color { color: #db3652; border: 0px; } </style> </head> <body> <div class="settle"> <p class="left">剩余:<span class="color left_count valid_quantity">180</span> </p> <span class="sub left abled disabled">-</span> <input type="text" id="buy_amount" class="left" name="total_count" value="1" /> <span class="add left abled ">+</span> </div> <script src="js/jquery.js"></script> <script> function loadCount() { var buyAmountInput = $('#buy_amount'),subBtn = $('.sub'),addBtn = $('.add'),leftCountSpan = $('.left_count'); subBtn.click(function () { var inputValue = parseInt(buyAmountInput.val()); addBtn.removeClass('disabled'); buyAmountInput.val(--inputValue); if (buyAmountInput.val() < 2) { $(this).addClass('disabled'); buyAmountInput.val('1'); } }) addBtn.click(function () { var inputValue = parseInt(buyAmountInput.val()); var left_count = parseInt(leftCountSpan.text()); inputValue++; if (inputValue > 1) { subBtn.removeClass('disabled'); } if (inputValue >= left_count) { $(this).addClass('disabled'); buyAmountInput.val(left_count); } else { buyAmountInput.val(inputValue); } }) buyAmountInput.focus(function () { subBtn.removeClass('disabled'); addBtn.removeClass('disabled'); }) buyAmountInput.blur(function () { var inputValue = parseInt(buyAmountInput.val()); var left_count = parseInt(leftCountSpan.text()); if (inputValue < 2) { subBtn.addClass('disabled'); buyAmountInput.val('1'); }else if (inputValue >= left_count) { addBtn.addClass('disabled'); buyAmountInput.val(left_count); }else{ buyAmountInput.val(inputValue); } }) } $(function(){ loadCount(); }) </script> </body> </html>