gpt4 book ai didi

javascript - 更改 Javascript 中的单位

转载 作者:行者123 更新时间:2023-12-01 02:58:28 25 4
gpt4 key购买 nike

我正在创建一个 cooking 网站之类的东西。

所以我有一张 table ,里面有所有需要的食材,你应该改变你想要 cooking 的份量。

所以我遇到了一些问题:

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>

首先:我需要将数字相乘而不单位,因此当您需要 4 份时,请从 0.25 公斤中减去 1 公斤。

通过用空格分割文本(“1 kg”)来做到这一点是个好习惯吗,所以我们有 1kg然后只乘第一个数字?

其次:正如第二行所示,有些东西不能以千克或克为单位。在这种情况下洋葱:D

我能以某种方式使 1/2 等也相乘吗?

例如,如果您想要制作 4 份并单击按钮,则会乘以 4,但如果您决定只需要 2 份并再次单击按钮,则会得到 8 份。如何保存基数(西红柿为 0.25,洋葱为 0.5)以使数字准确?

最佳答案

因此,您希望保留原始数据和原始单位,并在每次要求重新计算时使用它们。只需将它们保存为元素本身的单位,然后在每次重新计算时使用它们而不是实际文本。

这是一种方法。

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 - 更改 Javascript 中的单位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46593702/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com