范围滑块计算器

Question

我有一个简单的范围滑块计算器，可以计算一定数量商品的总成本。它考虑“关税”：所选项目数量的单位成本。例如，在 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>

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

});

https://jsfiddle.net/8t7nnjux/2/

现在我需要考虑商品的类型。例如，对于 item1 - 一个关税数组，对于 item2 - 另一个数组，依此类推。选择产品类型时应切换关税，并考虑为范围滑块选择的数字。

Answer 1

使用对象，每个元素按项目类型索引，然后更新数据。

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

  var itemtype = "item-1";

  $('.item-type').click(function() {
    $('.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());
  });

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

    tariff[itemtype].forEach(function(num, item) {
      if (tariff[itemtype][item].begin <= i) {
        totalPrice = tariff[itemtype][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();

});

span.item-type {
  border-bottom: 1px solid blue;
  color: blue;
}

span.item-type:hover {
  cursor: pointer;
  color: red;
  border-bottom: 1px solid red;
}

span.item-type-active {
  color: white;
  background-color: red;
  border-bottom: 0;
  padding: 5px;
}


/*SLIDER RANGE*/

input[type=range] {
  -webkit-appearance: none;
  /*margin: 0 auto;*/
  margin-bottom: 50px;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  /*border-top: 1px solid #b99400;*/
  /*border-bottom: 2px solid #ffd631;*/
  cursor: pointer;
  /*animate: 0.2s;*/
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  background: #fc0;
  border-radius: 25px;
  /*border: 0px solid #000101;*/
  transition: background 0.1s ease;
}

input[type=range]::-webkit-slider-thumb {
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  border: 10px solid #fc0;
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -19px;
  transition: border 0.1s ease;
  -webkit-box-shadow: 0px 11px 27px -12px rgba(145, 94, 31, 1);
  -moz-box-shadow: 0px 11px 27px -12px rgba(145, 94, 31, 1);
  box-shadow: 0px 11px 27px -12px rgba(145, 94, 31, 1);
}


/*input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ff0;
}*/

input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  /*border-top: 1px solid #b99400;*/
  /*border-bottom: 2px solid #ffd631;*/
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  background: #007aff;
  border-radius: 25px;
  /*border: 0px solid #000101;*/
  transition: background 0.1s;
}

input[type=range]::-moz-range-thumb {
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  border: 3px solid #007aff;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
  transition: border 0.1s ease;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  /*border-top: 1px solid #b99400;*/
  /*border-bottom: 2px solid #ffd631;*/
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  background: #007aff;
  border-radius: 25px;
  /*border: 0px solid #000101;*/
  transition: background 0.2s ease;
}

input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

input[type=range]::-ms-thumb {
  /*box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
  border: 3px solid #007aff;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
  transition: border 0.1s;
}

input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

input[type=range]:hover::-webkit-slider-runnable-track {
  background: #ffd83c;
}

input[type=range]:hover::-webkit-slider-thumb {
  /*background: #fff;*/
  border-color: #ffd83c;
  -webkit-box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
  -moz-box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
  box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
}

input[type=range]:active::-webkit-slider-runnable-track {
  background: #ffd83c;
}

input[type=range]:active::-webkit-slider-thumb {
  /*background: #fff;*/
  border-color: #ffd83c;
  -webkit-box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
  -moz-box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
  box-shadow: 0px 6px 27px -12px rgba(145, 94, 31, 1);
}

input[type=range]:hover::-moz-range-track {
  background: #e52e5e;
}

input[type=range]:hover::-moz-range-thumb {
  background: #fff;
  border-color: #e52e5e;
}

input[type=range]:active::-moz-range-track {
  background: #e52e5e;
}

input[type=range]:active::-moz-range-thumb {
  background: #fff;
  border-color: #e52e5e;
}


/*input[type=range]:focus::-webkit-slider-thumb {
  background: #fff;
  transition: background 0.1s ease;
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>How much items do you need?</h2>
<div style="margin-top: 10px;">
  <span class="item-type item-type-active" data-id="item-1">Item 1</span>
  <span class="item-type" data-id="item-2">Item 2</span>
  <span class="item-type" data-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>