javascript - 使用jquery使用对象进行计算

Question

我正在尝试根据选择进行计算，例如，计算每个基本价格的成人数量。

问题是，当我在(选择 - 选项)中选择另一个值时，它不会更新该值，仍然显示第一个值。

有什么建议吗？

values = {
    adults : $('#adults').val(),
    children: $('#children').val(),
    listPickup: $('#pickup').val()
}

price = {
    base: values.adults * 6,
    child: values.children * 5,
    pickup: values.listPickup * values.adults,
    total : function() {
    return this.base + this.child + this.pickup
  } 
}

$('.bookinginput').on('change', function(){
    console.log(price.total())
})

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<select class="bookinginput" name="adults" id="adults" >
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select class="bookinginput" name="children" id="children" >
  <option value="3">3</option>
  <option value="3">4</option>
</select>
<select class="bookinginput" name="pickup" id="pickup">
  <option value="6">6</option>
  <option value="7">7</option>
</select>

Answer 1

正如大家所说，你需要重新计算。在这里我对您的代码做了一些更改

基本上，每次调用 total()函数，它首先调用getProperties()这是我编写的一个新方法，它从 <select> 获取当前值对象。然后获取更新值的总和

price = {
    base: null,
    child: null,
    pickup: null,
    total : function() {
      // Here we first update the properties with the actual value and then we get the total value
      return this.getProperties().getTotal();
  } ,
  // Get the data from the select and update current price properties
    getProperties: function(){
      this.base = $('#adults').val() * 6;
      this.child = $('#children').val() * 5;
      this.pickup = $('#pickup').val() * $('#adults').val();
      return this;
    },
    // function to get the total value
    getTotal: function(){
      return this.base + this.child + this.pickup;
    }
}

$('.bookinginput').on('change', function(){
    console.log(price.total())
})

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<select class="bookinginput" name="adults" id="adults" >
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select class="bookinginput" name="children" id="children" >
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<select class="bookinginput" name="pickup" id="pickup">
  <option value="6">6</option>
  <option value="7">7</option>
</select>