在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>