Javascript:动态计算输入值

Question

我有一个简单的 jquery 计算器:

   <p class="price" data-base-price="50">$<span>80</span></p>

    <select name="s1" class="price-option">
        <option value="1" data-price="10">Item 1</option>
        <option value="2" data-price="20">Item 2</option>
    </select>

    <select name="s2" class="price-option">
        <option value="1" data-price="30">Item 3</option>
        <option value="2" data-price="40">Item 4</option>
    </select>

    <input type="text" name="price-option-input" id="price-option-input">

Javascript:

$(document).ready(function () {
  $('.price-option').change(function(){
    var price = parseInt($('.price').data('base-price'));

    $('.price-option').each(function(i, el) {
      price += parseInt($('option:selected', el).data('price'));
    });
    price += parseInt($('#price-option-input').val());

    $('.price span').text(price);
  }); 
});

这个计算器可以工作，但问题是当我为文本输入输入值时，price 中的结果没有动态更新(我需要在选择器中选择另一个选项来更新结果)

Answer 1

你必须添加keyUp事件

 calculate = function(){
    var price = parseInt($('.price').data('base-price'));

    $('.price-option').each(function(i, el) {
      price += parseInt($('option:selected', el).data('price'));
    });
    price += parseInt($('#price-option-input').val());

    $('.price span').text(price);
}


$(document).ready(function () {
  $('#price-option-input', .price-option').change(calculate);
  $('#price-option-input', .price-option').keyup(calculate);
});

我认为有必要解释一下，当您取消选择输入时，或者在数字类型中，当您使用向上/向下按钮时，会触发 change 事件。