在Javascript中更改单位

Question

我正在创建一个烹饪网站排序的事情。

所以我有一张桌子，上面有所有需要的配料，你应该改变你想煮的部分的数量。

所以我有几个问题是：

https://jsfiddle.net/t5tovvs7/5/

window.moreportions = function() { 
 
var number = document.getElementById("number").value 
 
var table = document.getElementById("table"); 
 
var rowCount = document.getElementById('table').rows.length; 
 
for (i = 1;i < rowCount;i++) { 
 
var text = table.rows[i].cells[0].innerHTML; 
 
var unit = text.split(" "); 
 
var newnumber = unit[0] * number 
 
table.rows[i].cells[0].innerHTML = newnumber 
 
} 
 
}

<!-- Bootstrap CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="/css/new.css"> 
 
<table class="table" id="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Anzahl</th> 
 
     <th>Zutat</th> 
 
    </tr> 
 
    </thead> 
 

 
    <!-- Erste Reihe --> 
 
    <tbody> 
 
    <tr> 
 
     <td>0.25 kg</td> 
 
     <td>Tomaten</td> 
 
    </tr> 
 
    </tbody> 
 

 
    <!-- Zweite Reihe --> 
 
    <tbody> 
 
    <tr> 
 
     <td>0.5</td> 
 
     <td>Zwiebel</td> 
 
    </tr> 
 

 
    <!-- Vorlage Anfang --> 
 

 
    </tbody> 
 
</table> 
 
<input id="number" type="number"> 
 
<button onclick="moreportions();">Calculate</button> 
 
<!-- jQuery first, then Tether, then Bootstrap JS. --> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

第一关：我需要乘以数不单位，因此生产1公斤当你想要4个部分的时候，可以减少0.25公斤

是不是很好的做法，通过分隔文本（“1 kg”）的空格，所以我们有1和kg，然后只是乘以第一个数字？

其次： 如第二行所示，有些东西不能用千克或克给出。在这种情况下，洋葱：D

我可以以某种方式使½等也得到倍增？作为一个例子，如果你想制作4个部分并点击按钮，它将乘以4，但如果你决定只想要2个部分并再次点击它，你会得到8个部分。 如何保存基数（番茄，0.25和洋葱的情况下为0.5），以便数量准确？

Answer 1

所以你想保留原始数据和原始单位，并在每次要求重新计算时使用这些数据。只需将它们保存为元素本身的单位，然后在每次重新计算时使用THEM而不是实际文本。

这是一种方法。

var calcButton = document.getElementsByClassName("calculate")[0]; 
 
var qtyInput = document.querySelector("#quantity") 
 
var ingredientQtyEls = document.querySelectorAll("td.recipe-quantity"); 
 

 
// For the sake of preserving the original quantities and units, 
 
// we'll save them as an attribute on the element itself 
 
for (i=0; i<ingredientQtyEls.length; i++){ 
 
    var origString = ingredientQtyEls[i].innerText; 
 
    // This will remove all the numeric bits, so we have the unit 
 
    var origUnit = origString.replace(/[-()\d//*+.]/g, ''); 
 
    // This does the exact opposite -- keep the qty and eval fractions. 
 
    var origAmt = eval(origString.replace(/[^-()\d/*+.]/g, '')); 
 
    
 
    // Now, we save them as attributes. 
 
    ingredientQtyEls[i].origAmt = origAmt; 
 
    ingredientQtyEls[i].origUnit = origUnit; 
 
    
 
} 
 

 

 
calcButton.addEventListener("click", function(){ 
 
    // When the calculate button is clicked, we should go ahead and 
 
    // iterate over the quantity els and update them as appropriate. 
 
    var quantity = qtyInput.value; 
 
    
 
    // We iterate over each row we've saved, 
 
    for (i=0; i<ingredientQtyEls.length; i++){ 
 
    // retrieve the original amount, 
 
    var startingAmt = ingredientQtyEls[i].origAmt; 
 
    
 
    // And update the innerText to the orig amount times quantity. 
 
    ingredientQtyEls[i].innerText = quantity*startingAmt+" "+ingredientQtyEls[i].origUnit; 
 
    
 
    } 
 
    
 
})

<table class="table" id="table"> 
 
    <thead> 
 
    <tr> 
 
     <th class="recipe-quantity">Anzahl</th> 
 
     <th class="recipe-ingredient">Zutat</th> 
 
    </tr> 
 
    </thead> 
 

 
    <!-- Erste Reihe --> 
 
    <tbody> 
 
    <tr class="ingredient-row"> 
 
     <td class="recipe-quantity">0.25 kg</td> 
 
     <td class="recipe-ingredient">Tomaten</td> 
 
    </tr> 
 
    <tr class="ingredient-row"> 
 
     <td class="recipe-quantity">1/2</td> 
 
     <td class="recipe-ingredient">Zwiebel</td> 
 
    </tr> 
 

 
    <!-- Vorlage Anfang --> 
 

 
    </tbody> 
 
</table> 
 
<input id="quantity" type="number"> 
 
<button class="calculate">Calculate</button>