首页 > 解决方案 > 范围从到数组中的键和值

问题描述

我有客户选择时间范围的任务,但不同的时间有不同的价格,我创建了 2 个带有时间选项的选择字段:

From time
<select>
  <option value="1">22:00</option>
  <option value="2">23:00</option>
  <option value="3">00:00</option>
  <option value="4">01:00</option>
</select>
etc...
to time
<select>
  <option value="5">04:00</option>
  <option value="6">05:00</option>
  <option value="7">06:00</option>
  <option value="8">07:00</option>
</select>
etc...

然后我创建了数组,在其中设置键以匹配选项值。

var prices = {1: 100, 2: 125, 3: 125, 4: 150, 5: 150, };

现在的问题是我如何返回选定日期的范围。

假设我从 22:00h 到 04:00h 选择选择器现在如何过滤数组以获取 1-5 的所有键,然后将所有值添加到最终价格。

  for (var cost in prices) {
      sum += prices[cost];
  }
  console.log(sum); 

标签: javascriptjqueryarrays

解决方案


你可以这样做:

$('select.from,select.to').change(function() {
  var fromval = $('select.from').val();
  var toval = $('select.to').val();
  var total= 0;

  for (var i = fromval; i <= toval; i++) {
    total = total + (+prices[i]);
  }
});

请注意,我已经为您的每个课程添加了一个课程select

演示

var prices = {
  1: 100,
  2: 125,
  3: 125,
  4: 150,
  5: 150
};

$('select.from,select.to').change(function() {
  var fromval = $('select.from').val();
  var toval = $('select.to').val();
  var total= 0;

  for (var i = fromval; i <= toval; i++) {
    total = total + (+prices[i]);
  }
  
  console.log(total)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="from">
  <option value="1">22:00</option>
  <option value="2">23:00</option>
  <option value="3">00:00</option>
  <option value="4">01:00</option>
</select>
<select class="to">
  <option value="5">04:00</option>
  <option value="6">05:00</option>
  <option value="7">06:00</option>
  <option value="8">07:00</option>
</select>


推荐阅读