2017-08-29 188 views
0

我有一个测量表 - 宽度和高度(附图)。红色的行是宽度,黄色的列是高度。对于宽度400和高度700,价格是1025.最大宽度是600,最大高度是900.我用选择做了它,但是我有一个问题来创建带有输入的价格计算,并且如果用户可以写入值这个数字之间 - 例如,如果一个客户写750 * 450mm的价格应该是1325,因为必须在700x400之后四舍五入到更高的价格。计算器高度宽度

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">