javascript - 计算数量和价格输出jquery

Question

当我在其输入文本中输入数字时，有没有一种方法可以按数量显示价格？ 这是我的带有输入类型文本的减号和加号的 js 代码

我的输入文字

$(".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();
        }
    });

这是html代码和js

我想在我的列表中按数量显示价格 <h3 class>Total : </h3

$('.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();
  }
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group col-xs-2">
  <span class="input-group-btn">
              <button type="button" class="btn btn-danger  btn-number"  data-type="minus" data-field="quant[2]">
                <span class="fa fa-minus"></span>
  </button>
  </span>
  <input type="text" name="quant[2]" class="form-control input-number" value="1" min="1" max="10">
  <span class="input-group-btn">
              <button type="button" class="btn btn-success  btn-number" data-type="plus" data-field="quant[2]">
                  <span class="fa fa-plus"></span>
  </button>
  </span>
</div>
<h3 class="bookingroom">Total: PHP 2,750.00</h3>

Answer 1

您可以尝试在 h3 标签中编辑文本。将其放入您的输入 onChange 函数中。

$('.input-number').change(function() {
    // previous code...
    let initialValue = $(this).data('price');
    let price = valueCurrent * initialValue;
    $('h3.bookingroom').text('Total: ' + price);
});

您可以从 h3 之前的文本中获取初始值，或者更好的想法是添加一个带有输入价格的数据标签

<input type="text" class="form-control input-number"
       name="quant[2]" 
       value="1" 
       min="1" 
       max="10" 
       data-price="2750" />