获取计数器输入的值并使用该值填充跨度

Question

我正在尝试做一些我认为相对简单的事情。我正在尝试获取输入计数器的值并将其显示在<span>。

中

我正在关注我在我网站的其他部分完成此操作的代码，但它不适用于此特定输入，我肯定错过了一些东西。

我的HTML：

<div class="row">
  <div class="col-md-8">
    <div class="input-group">
      <span class="input-group-btn">
        <button type="button" class="btn btn-danger btn-fill btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
          <span class="glyphicon glyphicon-minus"></span>
      </button>
      </span>
      <input type="text" id="month-counter" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
      <span class="input-group-btn">
        <button type="button" class="btn btn-success btn-fill btn-number" data-type="plus" data-field="quant[1]">
          <span class="glyphicon glyphicon-plus"></span>
      </button>
      </span>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="half-tb-calculator">
        <p>.5 TB | $50 x <span class="month-number"></span> month = <span></span></p>
      </div>
    </div>
  </div>

我的JQUERY

$('.btn-number').click(function(e){
    e.preventDefault();

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

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

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

            if(currentVal < input.attr('max')) {
                input.val(currentVal + 1).change();
            }
            if(parseInt(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 =  parseInt($(this).attr('min'));
    maxValue =  parseInt($(this).attr('max'));
    valueCurrent = parseInt($(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'));
    }
});
$(".input-number").keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

My JSFiddle is here.

我正在寻找的输出是获取计数器输入的值，并使用占位符'[number of months]'用该输入的值填充span。

Answer 1

我已经更新了你的小提琴。请检查下面。你可以使用＆＃34;拳击＆＃34;用于

中的第一个跨度和＃34;最后用于＆＃34;最后一个＆＃34;跨越div。你也可以使用eq（0）和eq（1）。

＆＃13;

＆＃13;

$(function() {

function setValues(){
 $('.half-tb-calculator >p > span:first').text($('#month-counter').val())
      $('.half-tb-calculator >p > span:last').text($('#month-counter').val() * 50)
}
setValues();
  $('#month-counter').on('input', function() {
    $('.half-tb-calculator >p > span:first').text(this.value)
    $('.half-tb-calculator >p > span:last').text(this.value * 50)
  });
  $('.btn-number').click(function(e) {
    e.preventDefault();

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

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

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

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

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

    minValue = parseInt($(this).attr('min'));
    maxValue = parseInt($(this).attr('max'));
    valueCurrent = parseInt($(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'));
     setValues();
    }
    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'));
     setValues();
    }


  });
  $(".input-number").keydown(function(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
      // Allow: Ctrl+A
      (e.keyCode == 65 && e.ctrlKey === true) ||
      // Allow: home, end, left, right
      (e.keyCode >= 35 && e.keyCode <= 39)) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
      e.preventDefault();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-8">
    <div class="input-group">
      <span class="input-group-btn">
        <button type="button" class="btn btn-danger btn-fill btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
          <span class="glyphicon glyphicon-minus"></span>
      </button>
      </span>
      <input type="text" id="month-counter" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
      <span class="input-group-btn">
        <button type="button" class="btn btn-success btn-fill btn-number" data-type="plus" data-field="quant[1]">
          <span class="glyphicon glyphicon-plus"></span>
      </button>
      </span>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="half-tb-calculator">
        <p>.5 TB | $50 x <span class="month-number">[number of months]</span> month = <span></span></p>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;