我在Django中制作了一个饮料配方工具。我希望能够计算每份所需的配料。为此,我输入了一个允许数字的输入。现在我想将配料量乘以所选的份量。我可以以某种方式存储原始值并始终使用它吗?有什么好的方法来实现这一点?
我的HTML看起来像这样:
<table class='cocktail_ingredients my-5'>
<tr>
<th>
<h2>
INGREDIENTS
</h2>
</th>
<th>
<h2>
ML
</h2>
</th>
</tr>
{% for ingredient in drink.get_ingredients %}
<tr>
<td> {% if ingredient.ingredient_rum %} {{ingredient.ingredient_rum}} {% else %} {{ingredient.ingredient_name}} {% endif %}</td>
<td id='amount'> {{ingredient.ingredient_amount}}</td>
</tr>
{% endfor %}
</table>
我写的JS和JQuery看起来像这样。我还没有使用JQuery的经验,所以我希望它对我到目前为止所做的有意义。
$(document).ready(function() {
var serveAmount = document.getElementById('serves');
serveAmount.addEventListener('keyup', function() {
if (!$('#serves').val()) {
return false;
}
else {
$('.amount').each( function() {
var amount = parseInt($(this).text());
var serves = $('#serves').val();
new_amount = amount * serves
$(this).text($(this).text().replace($(this).text(), new_amount))
});
};
});
});
**编辑:**渲染HTML:
<table class='cocktail_ingredients my-5'>
<tr>
<th>
<h2>
INGREDIENTS
</h2>
</th>
<th>
<h2>
ML
</h2>
</th>
</tr>
<tr>
<td> Lime </td>
<td class='amount'> 25.0</td>
</tr>
<tr>
<td> Simple Syrup </td>
<td class='amount'> 15.0</td>
</tr>
<tr>
<td> Original </td>
<td class='amount'> 60.0</td>
</tr>
</table>
1条答案
按热度按时间0yg35tkg1#
您可以使用data-attribute来存储
ingredients
的原始值,每当服务的值发生变化时,都会获取data-* 值并对其进行计算。你可以在你的django代码中做的更改:
演示代码: