Question

我正在创建一个烹饪网站。

所以我有一张桌子上有所需的所有食材，你应该改变你想做的部分数量。

所以我遇到了一些问题：

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>

首先：我需要将数字乘以而不是单位，所以当你需要4份时，要从0.25公斤中减去1公斤。

通过将文本（“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>

在Javascript中更改单位

1 个答案: