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. 改變服務到1.5，這將給人以無限的小數位數
2. 設置服務回原（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的。數據（鍵，值）解決方案

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

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

     } 
    }); 
});​