2017-08-29 25 views
0

私は、測定 - 幅と高さ(添付画像)のテーブルを持っています。赤い行が幅、黄色の列が高さです。幅400と高さ700の場合、価格は1025です。最大幅は600、最大高さは900です。私は選択でそれを行いましたが、入力による価格の計算を作成し、ユーザーが値を書くことができれば問題がありますこの数字の間に - 例えば顧客が750 * 450mmを書いた場合、700x400の後でより高い価格に切り捨てなければならないので、価格は1325でなければならない。計算機の高さの幅

jQuery('.calc-btn').click(function(e) { 
 
    e.preventDefault(); 
 
    var pricePerDoor = 725, 
 
    widthInc = 225, 
 
    heightInc = 75, 
 
    oneDoorPrice, 
 
    wert1 = jQuery('#width').prop('selectedIndex') + 1, 
 
    wert2 = jQuery('#height').prop('selectedIndex') + 1, 
 
    oneDoorPrice = (pricePerDoor + (wert1 * widthInc) + (wert2 * heightInc)); 
 
    jQuery('.total').val(oneDoorPrice); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<select id="width"> 
 
<option value="400">400mm</option> 
 
<option value="500">500mm</option> 
 
<option value="600">600mm</option> 
 
</select> 
 
<select id="height"> 
 
<option value="700">700mm</option> 
 
<option value="800">800mm</option> 
 
<option value="900">900mm</option> 
 
</select> 
 
<input type="text" name="total" class="total"> 
 
<input type="submit" class="calc-btn" value="Submit">

image

+0

どこがこれまでに試したコードはありますか? –

+0

https://jsfiddle.net/wr66dcfo/6/ – alexanderstanchev

+0

以下の回答が役立つ場合は、回答としてマークしてください –

答えて

0

あなたは最寄りの数が最も多いのフォームの配列の幅と高さarrayインデックスからチェックして、あなたのロジックにというインデックスを割り当てることができます。

for (var i = widthArr.length - 1; i >= 0; i--) { 
    if (widthArr[i] >= wert1) 
     widIndex = i + 1; 
} 

ワーキングサンプル

jQuery('.calc-btn-input').click(function(e) { 
 
    e.preventDefault(); 
 
    var pricePerDoor = 725, 
 
    widthInc = 225, 
 
    heightInc = 75; 
 

 
    var widthArr = [400, 500, 600]; 
 
    var heightArr = [700, 800, 900]; 
 

 
    var widIndex = widthArr.length; 
 
    var heightIndex = heightArr.length; 
 

 
    var wert1 = parseInt(jQuery('#width_input').val()); 
 
    var wert2 = parseInt(jQuery('#height_input').val()); 
 

 
    for (var i = widthArr.length - 1; i >= 0; i--) { 
 
    if (widthArr[i] >= wert1) 
 
     widIndex = i + 1; 
 
    } 
 

 
    for (var i = heightArr.length - 1; i >= 0; i--) { 
 
    if (heightArr[i] >= wert2) 
 
     heightIndex = i + 1; 
 
    } 
 

 
    var oneDoorPrice = (pricePerDoor + (widIndex * widthInc) + (heightIndex * heightInc)); 
 
    jQuery('.total-input').val(oneDoorPrice); 
 
}); 
 

 
jQuery('.calc-btn').click(function(e) { 
 
    e.preventDefault(); 
 
    var pricePerDoor = 725, 
 
    widthInc = 225, 
 
    heightInc = 75, 
 
    oneDoorPrice, 
 
    wert1 = jQuery('#width').prop('selectedIndex') + 1, 
 
    wert2 = jQuery('#height').prop('selectedIndex') + 1, 
 
    oneDoorPrice = (pricePerDoor + (wert1 * widthInc) + (wert2 * heightInc)); 
 
    jQuery('.total').val(oneDoorPrice); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select id="width"> 
 
    <option value="400">400mm</option> 
 
    <option value="500">500mm</option> 
 
    <option value="600">600mm</option> 
 
</select> 
 
<select id="height"> 
 
    <option value="700">700mm</option> 
 
    <option value="800">800mm</option> 
 
    <option value="900">900mm</option> 
 
</select> 
 

 
<input type="text" name="total" class="total"> 
 
<input type="submit" class="calc-btn" value="Submit"> 
 
<br> 
 
<br> 
 
<input id="width_input"> 
 
<input id="height_input"> 
 

 
<input type="text" name="total" class="total-input"> 
 
<input type="submit" class="calc-btn-input" value="Submit">

関連する問題