jquery+bootstrap使用數字增減按鈕

標籤：

<div class="container"><div class="page-header"><h1>Bootstrap 3 input-spinner</h1></div>    <label for="sign_times" class="hr-label col-md-6"><span                                    class="required">*</span><span class="hr-span">簽訂次數</span> </label>  <div class="input-group spinner">    <input type="text" class="form-control" value="42">    <div class="input-group-btn-vertical">      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>    </div>  </div></div>

.spinner {  width: 100px;}.spinner input {  text-align: right;}.input-group-btn-vertical {  position: relative;  white-space: nowrap;  width: 1%;  vertical-align: middle;  display: table-cell;}.input-group-btn-vertical > .btn {  display: block;  float: none;  width: 100%;  max-width: 100%;  padding: 8px;  margin-left: -1px;  position: relative;  border-radius: 0;}.input-group-btn-vertical > .btn:first-child {  border-top-right-radius: 4px;}.input-group-btn-vertical > .btn:last-child {  margin-top: -2px;  border-bottom-right-radius: 4px;}.input-group-btn-vertical i{  position: absolute;  top: 0;  left: 4px;}

(function ($) {  $(‘.spinner .btn:first-of-type‘).on(‘click‘, function() {    $(‘.spinner input‘).val( parseInt($(‘.spinner input‘).val(), 10) + 1);  });  $(‘.spinner .btn:last-of-type‘).on(‘click‘, function() {    $(‘.spinner input‘).val( parseInt($(‘.spinner input‘).val(), 10) - 1);  });})(jQuery);

 

jquery+bootstrap使用數字增減按鈕