javascript - 输入文本字段旁边的按钮

Question

我想将两个按钮放置在一个垂直居中的输入文本框旁边。这是我到目前为止所做的:

jQuery(document).ready(function($) {
  //plugin bootstrap minus and plus
  //http://jsfiddle.net/laelitenetwork/puJ6G/
  $('.btn-number').click(function(e) {
    e.preventDefault();

    fieldName = $(this).attr('data-field');
    type = $(this).attr('data-type');
    var input = $("input[name='" + fieldName + "']");
    var currentVal = parseFloat(input.val());
    if (!isNaN(currentVal)) {
      if (type == 'minus') {

        if (currentVal > input.attr('min')) {
          input.val(currentVal - 0.5).change();
        }
        if (parseFloat(input.val()) == input.attr('min')) {
          $(this).attr('disabled', true);
        }

      } else if (type == 'plus') {

        if (currentVal < input.attr('max')) {
          input.val(currentVal + 0.5).change();
        }
        if (parseFloat(input.val()) == input.attr('max')) {
          $(this).attr('disabled', true);
        }

      }
    } else {
      input.val(0);
    }
  });
  $('.input-number').focusin(function() {
    $(this).data('oldValue', $(this).val());
  });
  $('.input-number').change(function() {

    minValue = parseFloat($(this).attr('min'));
    maxValue = parseFloat($(this).attr('max'));
    valueCurrent = parseFloat($(this).val());

    name = $(this).attr('name');
    if (valueCurrent >= minValue) {
      $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
      alert('Sorry, the minimum value was reached');
      $(this).val($(this).data('oldValue'));
    }
    if (valueCurrent <= maxValue) {
      $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
      alert('Sorry, the maximum value was reached');
      $(this).val($(this).data('oldValue'));
    }


  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
  <div class="input-group">
    <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
    <ul class="input-group-btn">
      <li><button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
				<span class="glyphicon glyphicon-minus">-</span>
			</button></li>
      <li><button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
				<span class="glyphicon glyphicon-plus">+</span>
			</button></li>
    </ul>
  </div>
</div>

代码运行良好，但我对定位元素不满意。

Answer 1

像这样

ul.input-group-btn {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

jQuery(document).ready(function($) {
  //plugin bootstrap minus and plus
  //http://jsfiddle.net/laelitenetwork/puJ6G/
  $('.btn-number').click(function(e) {
    e.preventDefault();

    fieldName = $(this).attr('data-field');
    type = $(this).attr('data-type');
    var input = $("input[name='" + fieldName + "']");
    var currentVal = parseFloat(input.val());
    if (!isNaN(currentVal)) {
      if (type == 'minus') {

        if (currentVal > input.attr('min')) {
          input.val(currentVal - 0.5).change();
        }
        if (parseFloat(input.val()) == input.attr('min')) {
          $(this).attr('disabled', true);
        }

      } else if (type == 'plus') {

        if (currentVal < input.attr('max')) {
          input.val(currentVal + 0.5).change();
        }
        if (parseFloat(input.val()) == input.attr('max')) {
          $(this).attr('disabled', true);
        }

      }
    } else {
      input.val(0);
    }
  });
  $('.input-number').focusin(function() {
    $(this).data('oldValue', $(this).val());
  });
  $('.input-number').change(function() {

    minValue = parseFloat($(this).attr('min'));
    maxValue = parseFloat($(this).attr('max'));
    valueCurrent = parseFloat($(this).val());

    name = $(this).attr('name');
    if (valueCurrent >= minValue) {
      $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
      alert('Sorry, the minimum value was reached');
      $(this).val($(this).data('oldValue'));
    }
    if (valueCurrent <= maxValue) {
      $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
    } else {
      alert('Sorry, the maximum value was reached');
      $(this).val($(this).data('oldValue'));
    }


  });

});

ul.input-group-btn {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
  <div class="input-group">
    <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
    <ul class="input-group-btn">
      <li><button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
				<span class="glyphicon glyphicon-minus">-</span>
			</button></li>
      <li><button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
				<span class="glyphicon glyphicon-plus">+</span>
			</button></li>
    </ul>
  </div>
</div>