<!doctype html> <html> <head> <meta charset="utf-8"> <title>带加减按钮的数字输入框(整理)</title> <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> body { margin:0; padding:0; } li{ list-style: none; } .number-box { border:#e5e5e5 solid 1px; display:inline-block; overflow:hidden; } .number-box input[type='text'] { height:30px; border-top:none; border-bottom:none; border-left:#e5e5e5 solid 1px; border-right:#e5e5e5 solid 1px; margin:0; text-align:center; width:40px; outline:none; padding:0 5px; float:left; line-height:30px; } .number-box input[type='button'] { height:30px; width:40px; float:left; border:none; outline:none; background-color:#f3f3f3; line-height:30px; cursor:pointer; padding:0; } .number-box input[type='button']:hover { background-color:#f9f9f9; } .number-box input[type='button']:active { background-color:#f6f6f6; } </style> </head> <body> <ul> <li> <div class="number-box"> <input type="button" class="on-number" value="-" data-v="-1"> <input type="text" value="0"> <input type="button" class="on-number" value="+" data-v="1"> </div> </li> <li> <div class="number-box"> <input type="button" class="on-number" value="减" data-v="-1"> <input type="text" value="-5"> <input type="button" class="on-number" value="加" data-v="1"> </div> </li> <li> <div class="number-box"> <input type="button" class="on-number" value="减" data-v="-1"> <input type="text" value="5"> <input type="button" class="on-number" value="加" data-v="1"> </div> </li> </ul> <script> $(document.documentElement).on("click", ".on-number", function() { var $val = $(this).siblings("input[type='text']"), val = parseInt($val.val(), 10) + parseInt($(this).data("v")); $val.val(isNaN(val) ? 0 : val); }); </script> </body> </html>
