当我在其输入文本中输入数字时,是否可以通过数量数量显示价格?
这是我的减号和加号的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>

最佳答案

您可以尝试在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" />

关于javascript - 计算数量和价格输出jQuery,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59134239/

10-13 06:40