jquery 将表td乘以输入中的金额,并能够保持使用原始值

fjaof16o  于 2023-04-20  发布在  jQuery
关注(0)|答案(1)|浏览(94)

我在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>
0yg35tkg

0yg35tkg1#

您可以使用data-attribute来存储ingredients的原始值,每当服务的值发生变化时,都会获取data-* 值并对其进行计算。

你可以在你的django代码中做的更改

{% for ingredient in drink.get_ingredients  %}
  <tr>
    //..some codes.. added data-original --
    <td class='amount' data-original='{{ingredient.ingredient_amount}}'> {{ingredient.ingredient_amount}}</td>
 </tr>
 {% endfor %}

演示代码:

$('#serves').on('change', function() {
  var serves = $('#serves').val();
  $('.amount').each(function() {
    var amount = parseInt($(this).data('original'));//get data-*
    new_amount = amount * serves
    $(this).text(new_amount.toFixed(1))//add value to td
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='cocktail_ingredients my-5'>
  <tr>
    <th>
      <h2>
        INGREDIENTS
      </h2>
    </th>
    <th>
      <h2>
        ML
      </h2>
    </th>
  </tr>

  <tr>
    <td> Lime </td>
    <!--added data-*-->
    <td data-original="25.0" class='amount'> 25.0</td>
  </tr>

  <tr>
    <td> Simple Syrup </td>
    <td data-original="15.0" class='amount'> 15.0</td>
  </tr>

  <tr>
    <td> Original </td>
    <td data-original="60.0" class='amount'> 60.0</td>
  </tr>

</table>

<input type="number" id="serves" value="1">

相关问题