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.5，它将提供无限小数位
将服务设置回原始（5），小数不会消失

必需：无小数或舍入为绝对两位数，即2.08应为2.00。

感谢您的期待。

Answer 1

第一个问题：重要数字和四舍五入

你需要newIngredientAmount次来获得一些sigfigs，然后使用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（键，值）解决方案

由于四舍五入和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);
        }
    });
});

Answer 2

Math.round(newIngredientAmount)将为您提供数字。

但是，我只是玩了你的代码。我不认为使用之前计算的值是可靠的，特别是如果你将它四舍五入。这会弄乱你所有的配料比例。

这就是我要做的事情

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

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

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

            <li class="ingredient">
            <span class="amount" defaultAmount="3">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($("#defaultServing").val());
        var newValue = parseFloat($(event.target).val());
        if (previousValue && newValue) {
            $('.ingredient').each(function(index, elem) {
                var ingredientNow = $('.amount', elem);
                var oldIngredientAmount = ingredientNow.attr("defaultAmount");
                var newIngredientAmount = oldIngredientAmount * newValue / previousValue;
                // no decimal places
                // ingredientNow.text(Math.round(newIngredientAmount));
                // two decimal places
                ingredientNow.text(Math.round(newIngredientAmount*100)/100);
            });

        }
    });
});

Jquery计算不能正常工作

2 个答案: