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);
});

我认为值得解释的是，当您取消选择输入时会触发更改事件，或者在使用向上/向下按钮时以数字类型触发。

Answer 2

您可以添加一个按钮来执行计算，触发更改事件。

例：

$("button").on("click", function() {
   $('.price-option').trigger("change");
});

或者，您可以从输入中收听键盘事件，然后按回车键，进行计算。 问题是：你什么时候想做计算？ 在答案中，听取正确的事件并进行计算。

Answer 3

我相信你只需要使用.html因为这将设置内部HTML：

$('.price span').html(price);

为了将来参考，像这样的多选择器并不像这样的效率：

$('.price').find('span').html(price);

Answer 4

我修复了你的代码，现在工作正常http://plnkr.co/edit/pWSEimrKkA200jQK9w5a?p=preview

HTML：

 <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" onchange='updatePrice()'>

JS：

function updatePrice(){

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

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

}