Javascript 范围滑块计算器

我有一个简单的范围滑块计算器，它可以计算一定数量商品的总成本。它考虑了“关税”：所选择的项目数量的单位成本。例如，在1-3件的范围内，成本将为65件，5-10件-60件，依此类推。“关税”以对象{begin:1，price:10}的形式存储在数组中

HTML

<h2>How much items do you need?</h2>
<div style="margin-top: 10px;">
  <span class="item-type item-type-active" id="item-1">Item 1</span>
  <span class="item-type" id="item-2">Item 2</span>
  <span class="item-type" id="item-3">Item 3</span>
</div>
<div style="margin-top: 50px;">
      <input class="calc-range m-top-20" type="range" min="1" max="100" step="1" value="1">
</div>
Number:<div class="calc-count">1</div>
Total price: <span class="calc-total-price"></span><br>
Price per item: <span class="calc-price"></span>

您需要多少物品？
项目1
项目2
项目3
编号：1
总价：

每项价格：

Javascript

$(document).ready(function($) {

$('.item-type').click(function() {
    $('.item-type').removeClass('item-type-active');
  $(this).addClass('item-type-active');
  });

function rangeCalc(i) {
var totalPrice = 0;
var tariff = [{begin:1, price:75}, {begin:3, price:70}, {begin:6, price:65}, {begin:11, price:60}, {begin:21, price:55}, {begin:51, price:50}];
var tariffItem2 = [{begin:1, price:85}, {begin:3, price:80}, {begin:6, price:75}, {begin:11, price:70}, {begin:21, price:65}, {begin:61, price:60}];

tariff.forEach(function(num, item) {
    if (tariff[item].begin <= i) {
    totalPrice = tariff[item].price;
    $('.calc-total-price').text(i*totalPrice);
    $('.calc-price').text(totalPrice);
    };
  //console.log(tariff[item].begin);
});
};

$('.calc-range').on('input', function() {
    $('.calc-count').text(this.value);
  rangeCalc(this.value);
});

//rangeCalc();

});

$（文档）.ready（函数（$）{
$（'.item type'）。单击（函数（）{
$（'.item-type'）.removeClass（'item-type-active'）；
$（this.addClass（'item-type-active'）；
});
函数rangeCalc（i）{
var totalPrice=0；
var关税=[{begin:1，价格：75}，{begin:3，价格：70}，{begin:6，价格：65}，{begin:11，价格：60}，{begin:21，价格：55}，{begin:51，价格：50}]；
var tariffItem2=[{begin:1，price:85}，{begin:3，price:80}，{begin:6，price:75}，{begin:11，price:70}，{begin:21，price:65}，{begin:61，price:60}]；
forEach关税（功能（数量，项目）{
如果（关税[item].begin使用对象，每个元素按项目类型索引，然后更新数据


$（文档）.ready（函数（$）{
var itemtype=“item-1”；
$（'.item type'）。单击（函数（）{
$（'.item-type'）.removeClass（'item-type-active'）；
$（this.addClass（'item-type-active'）；
itemtype=$（this.data（'id'）；
$（'.calc count'）.text（$（'.calc range'）.val（））；
rangeCalc（$（'.calc range'）.val（））；
});
函数rangeCalc（i）{
var totalPrice=0；
var关税={
“第1项”：[{
“开始”：1，
“价格”：75
}, {
“开始”：3，
“价格”：70
}, {
“开始”：6，
“价格”：65
}, {
“开始”：11，
“价格”：60
}, {
“开始”：21，
“价格”：55
}, {
“开始”：51，
“价格”：50
}],
“第2项”：[{
“开始”：1，
“价格”：85
}, {
“开始”：3，
“价格”：80
}, {
“开始”：6，
“价格”：75
}, {
“开始”：11，
“价格”：70
}, {
“开始”：21，
“价格”：65
}, {
“开始”：61，
“价格”：60
}],
“项目3”：[{
“开始”：1，
“价格”：55
}, {
“开始”：3，
“价格”：60
}, {
“开始”：6，
“价格”：95
}, {
“开始”：11，
“价格”：100
}, {
“开始”：21，
“价格”：45
}, {
“开始”：61，
“价格”：70
}]
};
关税[项目类型].forEach（功能（数量，项目）{
if（关税[itemtype][item]。开始谢谢，这正是我需要的，代码也非常简单明了