javascript - Jquery 计算无法正常工作

Question

我有一小段 jQuery 代码可以根据给定的份量计算食谱成分，但在某些地方它无法正常工作。

我的代码是这样的:

Serving: <input type="text" name="serving" class="serving" value="5" /> persons
<input type="hidden" id="previousServing" value="5"/>

        <h3>ingredients</h3>
        <ul class="ingredients">
        <li class="ingredient">
        <span class="amount">1</span> cups
        <span class="name"><a href="http://www.mysite.com/ingredient/yogurt/">yogurt</a></span>
        </li>

        <li class="ingredient">
        <span class="amount">2</span> tbsp
        <span class="name"><a href="http://www.mysite.com/ingredient/yogurt/">chillies</a></span>
        </li>

        <li class="ingredient">
        <span class="amount">3</span> pieces
        <span class="name"><a href="http://www.mysite.com/ingredient/yogurt/">butter</a></span>
        </li>
        </ul>



$(function() {
  $('.serving').bind('keyup', function(event) {
    var previousValue = parseFloat($("#previousServing").val());
    var newValue = parseFloat($(event.target).val());
    if (previousValue && newValue) {
        $('.ingredient').each(function(index, elem) {
            var ingredientNow = $('.amount', elem);
            var oldIngredientAmount = ingredientNow.text();
            var newIngredientAmount = oldIngredientAmount * newValue / previousValue;
            ingredientNow.text(newIngredientAmount);
        });
        $('#previousServing').val(newValue);
    }
});
});

http://jsfiddle.net/vansimke/tLWpr/

问题:

1. 将 serving 改为 1.5，小数位数不限
2. 将服务设置回原来的 (5)，小数点不会消失

必需:没有小数或四舍五入为绝对两位数，即 2.08 应为 2.00。

感谢期待。

Answer 1

第一个问题:有效数字和四舍五入

您需要对 newIngredientAmount 进行计时以获取多个 sigfig，然后使用 Math.round 将其四舍五入为最接近的整数。然后将结果除以之前乘以的数字

http://jsfiddle.net/vQbQ6/12/

添加了这一行

newIngredientAmount = Math.round(newIngredientAmount * 100) / 100;

创造

$(function() {
  $('.serving').bind('keyup', function(event) {
    var previousValue = parseFloat($("#previousServing").val());
    var newValue = parseFloat($(event.target).val());
    if (previousValue && newValue) {
        $('.ingredient').each(function(index, elem) {
            var ingredientNow = $('.amount', elem);
            var oldIngredientAmount = ingredientNow.text();
            var newIngredientAmount = oldIngredientAmount * newValue / previousValue;
            newIngredientAmount = Math.round(newIngredientAmount * 100) / 100; 
            ingredientNow.text(newIngredientAmount);
        });
        $('#previousServing').val(newValue);
    }
});

第二个问题:Jquery .data(key, value) 解决方案

小数点附近的问题是由于四舍五入和 oldIngredientAmount * newValue/previousValue 造成的问题，因为其中一些值可能已经四舍五入了。在我看来，这是计算配料量的一种糟糕方法。相反，您应该根据初始成分比率而不是您计算的四舍五入的派生数字进行数学计算。您可以使用 jquery .data() 记录数量跨度中的初始值，并每次对这些数字进行数学运算。

http://api.jquery.com/data/

Fiddler 使用 .data() 保留初始比率并在数学中使用它

http://jsfiddle.net/vQbQ6/14/

$(function() {
    $('.ingredient').each(function(index, elem){
        $this = $(this);
        $this.data('init', parseFloat($this.text()));
    });

    $('#previousServing').data('init', parseFloat($('#previousServing').val()));

    $('.serving').bind('keyup', function(event) {
        var previousValue = $("#previousServing").data('init');
        var newValue = parseFloat($(event.target).val());
        if (previousValue && newValue) {
            $('.ingredient').each(function(index, elem) {
                var ingredientNow = $('.amount', elem);
                var initIngredientAmount = $(this).data('init');
                var newIngredientAmount = initIngredientAmount * newValue / previousValue;
                newIngredientAmount = Math.round(newIngredientAmount * 100) / 100; 
                ingredientNow.text(newIngredientAmount);
            });
            $('#previousServing').val(newValue);
        }
    });
});