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桁に丸めます。つまり、2.08は2.00である必要があります。

期待してくれてありがとう。

4

2 に答える 2

2

最初の問題: 有効数字と丸め

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

2 番目の問題: Jquery .data(key, value) ソリューション

小数がぶら下がっているという問題は、丸めによる問題でありoldIngredientAmount * newValue / previousValue、これらの値の一部が丸められている可能性があるためです。これは成分の量を計算する方法が悪いように私には思えます。代わりに、計算する丸められた派生数値ではなく、最初の成分比率に基づいて計算する必要があります. jquery.data()を使用して、金額スパンの初期値を記録し、毎回それらの数値を計算することができます。

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

.data()初期比率を保持し、それを数学で使用するためのFiddler

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 に答える