用Type=在每个输入JQuery“数字”中设置不同的计算

Question

现在我正在做PHP代码，并结合JQuery进行计算。我在JQuery方面的经验不太丰富。我用这个图像来解释

​

​

我有三个字段：“大写”、“标记”和“每个项目的成本”。每个字段都有不同的公式。公式是计算每个字段。

公式如下：

• Capital = Cost_Per_Item / (100 + Markup )/ 100
• Markup = (( Cost_Per_Item / Capital )-1)*
• =( Capital +( Capital *(Markup/ 100 )

在这种情况下，我试图用JQuery来构建公式。这就是我所做的。我还在这里做了一个样本，https://repl.it/@ferdinandgush/3-formula。只需单击顶部页面上的"Run“按钮，您就可以测试它。

HTML

​

$(function() {
  $('.capital').on('input', function() {
    var capital = $(this).val();
    var markup = $(this).closest("tr").find('.markup').val();
    var costPerUnit = $(this).closest("tr").find('.costPerUnit').val();

    if (markup != '') {
      var formulaCostPerunit = (capital + (capital * (markup / 100)));
      $(this).closest("tr").find('.costPerUnit').val(formulaCostPerunit);
    }

    if (costPerUnit != '') {
      var formulaMarkup = ((costPerUnit / capital) - 1) * 100;
      $(this).closest("tr").find('.markup').val(formulaMarkup);
    }
  });

  $('.markup').on('input', function() {

    var capital = $(this).closest("tr").find('.capital').val();
    var markup = $(this).val();
    var costPerUnit = $(this).closest("tr").find('.costPerUnit').val();

    if (capital != '') {
      var formulaCostPerunit = (capital + (capital * (markup / 100)));
      $(this).closest("tr").find('.costPerUnit').val(formulaCostPerunit);
    }

    if (costPerUnit != '') {
      var formulaCapital = costPerUnit / ((100 + markup) / 100)
      $(this).closest("tr").find('.capital').val(formulaCapital);
    }
  });

  $('.costPerUnit').on('input', function() {

    var capital = $(this).closest("tr").find('.capital').val();
    var markup = $(this).closest("tr").find('.markup').val();
    var costPerUnit = $(this).val();

    if (capital != '') {
      var formulaMarkup = ((costPerUnit / capital) - 1) * 100;
      $(this).closest("tr").find('.markup').val(formulaMarkup);
    }

    if (markup != '') {
      var formulaCapital = costPerUnit / ((100 + markup) / 100)
      $(this).closest("tr").find('.capital').val(formulaCapital);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
  <thead>
    <tr>
      <th class="tg-6hok">ITEM</th>
      <th class="tg-6hok">CAPITAL</th>
      <th class="tg-6hok">MARKUP (%)</th>
      <th class="tg-6hok">COST PER ITEM</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-0lax">Book</td>
      <td class="tg-0lax"><input type="number" class="capital" name="capital[12][0]"></td>
      <td class="tg-0lax"><input type="number" class="markup" name="markup[12][0]"></td>
      <td class="tg-0lax"><input type="number" class="costPerUnit" name="cost_per_unit[12][0]"></td>
    </tr>
    <tr>
      <td class="tg-0lax">Pen</td>
      <td class="tg-0lax"><input type="number" class="capital" name="capital[12][1]"></td>
      <td class="tg-0lax"><input type="number" class="markup" name="markup[12][1]"></td>
      <td class="tg-0lax"><input type="number" class="costPerUnit" name="cost_per_unit[12][1]"></td>
    </tr>
  </tbody>
</table>

​

这个JQuery仍然是要实现的错误。我该怎么解决这个问题。请帮帮忙。

Answer 1

如果在编辑第三个字段时填充了这两个字段，则代码将重新计算其他每个字段。

例如，如果同时填写了每一项的资本和成本，然后编辑标记，则它将从原始大写和已编辑的标记中计算每项的新成本，并从每个项目的原始成本和已编辑的标记中计算新的资本。

您需要选择一个具有优先级，并且只更新另外两个字段中的一个。您可以使用else if代替第二个if，这样它就不会同时进行两次更新。

另一个问题是，在进行计算之前，不能将输入转换为数字。因此，+正在执行级联而不是加法。

如果用户将输入字段编辑为空值，则应将其视为默认值。

您可以使用toFixed(2)在小数点之后使用2位数字来显示结果，而不是长分数。

​

$(function() {
  $('.capital').on('input', function() {
    var capital = parseFloat($(this).val() || 0);
    var markup = $(this).closest("tr").find('.markup').val();
    var costPerUnit = $(this).closest("tr").find('.costPerUnit').val();

    if (markup != '') {
      markup = parseFloat(markup);
      var formulaCostPerunit = (capital + (capital * (markup / 100)));
      $(this).closest("tr").find('.costPerUnit').val(formulaCostPerunit.toFixed(2));
    } else if (costPerUnit != '') {
      costPerUnit = parseFloat(costPerUnit);
      var formulaMarkup = ((costPerUnit / capital) - 1) * 100;
      $(this).closest("tr").find('.markup').val(formulaMarkup.toFixed(2));
    }
  });

  $('.markup').on('input', function() {
    var capital = $(this).closest("tr").find('.capital').val();
    var markup = parseFloat($(this).val() || 0);
    var costPerUnit = $(this).closest("tr").find('.costPerUnit').val();

    if (capital != '') {
      capital = parseFloat(capital);
      var formulaCostPerunit = (capital + (capital * (markup / 100)));
      $(this).closest("tr").find('.costPerUnit').val(formulaCostPerunit.toFixed(2));
    } else if (costPerUnit != '') {
      costPerUnit = parseFloat(costPerUnit);
      var formulaCapital = costPerUnit / ((100 + markup) / 100)
      $(this).closest("tr").find('.capital').val(formulaCapital.toFixed(2));
    }
  });

  $('.costPerUnit').on('input', function() {
    var capital = $(this).closest("tr").find('.capital').val();
    var markup = $(this).closest("tr").find('.markup').val();
    var costPerUnit = parseFloat($(this).val() || 0);

    if (capital != '') {
      capital = parseFloat(capital);
      var formulaMarkup = ((costPerUnit / capital) - 1) * 100;
      $(this).closest("tr").find('.markup').val(formulaMarkup.toFixed(2));
    } else if (markup != '') {
      markup = parseFloat(markup);
      var formulaCapital = costPerUnit / ((100 + markup) / 100)
      $(this).closest("tr").find('.capital').val(formulaCapital.toFixed(2));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
  <thead>
    <tr>
      <th class="tg-6hok">ITEM</th>
      <th class="tg-6hok">CAPITAL</th>
      <th class="tg-6hok">MARKUP (%)</th>
      <th class="tg-6hok">COST PER ITEM</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-0lax">Book</td>
      <td class="tg-0lax"><input type="number" class="capital" name="capital[12][0]"></td>
      <td class="tg-0lax"><input type="number" class="markup" name="markup[12][0]"></td>
      <td class="tg-0lax"><input type="number" class="costPerUnit" name="cost_per_unit[12][0]"></td>
    </tr>
    <tr>
      <td class="tg-0lax">Pen</td>
      <td class="tg-0lax"><input type="number" class="capital" name="capital[12][1]"></td>
      <td class="tg-0lax"><input type="number" class="markup" name="markup[12][1]"></td>
      <td class="tg-0lax"><input type="number" class="costPerUnit" name="cost_per_unit[12][1]"></td>
    </tr>
  </tbody>
</table>

​