範圍滑塊計算器

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 - 一個關稅數組，另一個數組，等等。當選擇產品類型時，應考慮爲範圍滑塊選擇的數量切換資費。

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>