1

我有一小段 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. 将服务更改为 1.5，它将给出无限的小数位
  2. 将服务设置回原始（5），小数不会消失

要求：没有小数或四舍五入到绝对两位数，即 2.08 应为 2.00。

感谢期待。

4

2 回答 2

2

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

您需要多次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(key, value) 解决方案

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

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

提琴手.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);
        }
    });
});
于 2012-04-25T18:20:31.230 回答
0

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>

​</p> 

$(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);
            });

        }
    });
});​
于 2012-04-25T18:01:16.690 回答