在 keyup 上输入 rounded/replaced 到下一个倍数

Question

当我输入 0 - 1.53 之间的数字时，我首先有两个输入，我想自动将其替换为 1.53，当我输入 1.54 时，我想将其替换为 3.06，因为 (1.53 + 1.53) = 3.06 等。我使用 Math.ceil() 但我不知道如何将此值输入？

更多解释：

<p>if first input range between 0 - 1.53 result first input = 1.53, second input = 1</p>
<p>if first input range between 1.54 - 3.06 result first input = 3.06, second input = 2</p>
<p>if first input range between 3.06 - 4.59 result first input = 4.59, second input = 3</p>
    <div class="input-box col-sm-12">
        <label>in this input result supposed to round up to next multiple like 1.53 and 3.06 and 4.59...</label><br/>
        <input type="text" value="" id="product_val" autocomplete="off">
    </div>
    <div class="input-box col-sm-12">
        <label>second input</label><br/>
        <input type="number" value="" id="products_packs" autocomplete="off" disabled>
    </div>

和 js:

$(document).ready(function() {
var packSize = 1.53,
    packPrice = 35;
$('#product_val').keyup(function() {
    var area2 = $(this).val().replace(',', '.');
        var area = (Math.ceil(area2 / packSize) * packSize);
    var packs = Math.ceil(area / packSize);
    setPrice(packs * packPrice); 
    setPacks(Math.ceil(area / packSize)); 
});
$('#products_packs').keyup(function() {
    var packs = $(this).val();
    setPrice(packPrice * packs); 
    setArea(packSize * packs); 
    setPacks(packs);
});
function setArea(value) {
    $("#product_val").val(value);
}
function setPacks(value) {
    $("#products_packs").val(value);
    $("#quantity_wanted").val(value);
}
function setPrice(value) {
    $("#products_price").text($("#products_price").text().replace(/[0-9\.\,]+/, parseFloat(value).toFixed(2)));
}
});

这一行完成了所有工作，但我需要在停止输入后用这一行的结果替换我第一次输入的值var area = (Math.ceil(area2 / packSize) * packSize);我该怎么做？

这里正在工作fiddlehttps://jsfiddle.net/wzte04rj/1/

Answer 1

this version of question的答案：

我在 $('#product_val').keyup 中更改了 area, packs 和 setPacks - 这里是 jsfiddle:

$('#product_val').keyup(function() {
    var area2 = $(this).val().replace(',', '.');
    var area = Math.ceil(area2 / packSize);
    var packs = Math.ceil(area );
    setPrice(packs * packPrice); 
    setPacks(packSize * area); 
});

Answer 2

看看updated fiddle，它会如您所愿地工作。

解释：

问题是，您需要为您的工作做一点数学计算。我想出了这个：

( Math.floor( inputValue / packSize ) + 1 ) * packSize;

但由于它是一个简单的算法，因此还有许多其他选项。唯一要指出的是，在给定 1.53 作为输入的情况下，上面的行将生成 3.06；因此，如果值已经可以被 packSize 整除，我们需要在 if 语句之前取消计算（写一个 return 表达式）。喜欢：

var divider = inputValue / packSize;

if ( divider == ~~divder )
    return;

( Math.floor( inputValue / packSize ) + 1 ) * packSize;

另一点是，我们在用户离开输入时更新值。用户在输入时更改输入的值不是一个好的体验。但您可以将此事件更改为您想要的任何内容。

玩得开心 <3

在 keyup 上输入 rounded/replaced 到下一个倍数

input rounded/replaced to next multiple on keyup

javascript

rounding

ceil