简化多个输出计算

Question

我有以下代码为我提供所需的计算，但我希望它可以处理多个输出。

例如，A 部分和 B 部分将具有相同的 jQuery，但 B 部分可能具有不同的乘数或 calc3 等。

我将有多达 50 个部分，并试图避免编写 50 行 jQuery。有没有办法用 (this) 变量而不是 ('#id') 来写这个？

在下面的片段中，如果您添加数量、宽度、高度和深度 - 您将看到 A 部分的计算工作，但不是 B 部分，因为我试图简化 jQuery 计算。

//part1
$("#part1d").keyup(function() {
  //part A
  $('#part1A').val($('#part1q').val() * 1);
  $('#part1AL').val($('#part1w').val() - $('#calc1').val());
  $('#part1AW').val($('#part1d').val() - $('#calc2').val());
  //part B
  $('#part1A').val($('#part1q').val() * 2);
  $('#part1AL').val($('#part1w').val() - $('#calc1').val());
  $('#part1AW').val($('#part1d').val() - $('#calc2').val());
});

* {
  margin: 0;
  padding: 0;
  float: left;
}

.wrap {
  width: 96%;
  margin: 2% 2% 500px 2%;
}

.partwrap {}

.partname {
  width: 20%;
  margin: 1% 20% 1% 0;
}

.partdata {
  width: 10%;
}

input {
  width: auto;
  float: none;
}

.sectiontitle {
  color: red
}

.partdescr {
  color: purple;
}

.parts {
  width: 150px;
}

.values {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--values-->
<input class="values" id="calc1" value="1.4375">
<input class="values" id="calc2" value=".25">

<div class="wrap">
  <!--part 1-->
  <!--part 1 input-->
  <div class="partwrap">
    <div class="partdescr">
      <div class="partname">Part Number: <input id="part1"></div>
      <div class="partdata">Qty <input id="part1q"></div>
      <div class="partdata">Width <input id="part1w"></div>
      <div class="partdata">Height <input id="part1h"></div>
      <div class="partdata">Depth <input id="part1d"></div>

    </div>
    <!--part 1 output-->
    <div class="partdescr">
      <div class="parts">Part Name</div>
      <div class="parts">Qty</div>
      <div class="parts">Length</div>
      <div class="parts">Width</div>
      <div class="parts">Height</div>
    </div>

    <div>
      <div class="parts">Part A</div>
      <input id="part1A" class="parts">
      <input id="part1AL" class="parts">
      <input id="part1AW" class="parts">
      <input id="part1AH" class="parts">
    </div>
    <div>
      <div class="parts">Part B</div>
      <input id="part1A" class="parts">
      <input id="part1AL" class="parts">
      <input id="part1AW" class="parts">
      <input id="part1AH" class="parts">
    </div>

  </div>
</div>

Answer 1

首先，您的 HTML 无效。

1) 不要使用重复的ID's，而是使用类。

2) 你重复了 div 闭包 </div> 标签

一旦你解决了这个问题，你应该会得到想要的结果，但是，对于覆盖位，即clac3 或多路复用器，你可以将唯一的ID添加到该部分 div 并以特定输入为目标

JS

//part1
$("#part1d,#part1q,part1w,part1h").keyup(function () {
//part A
    $('.part1A').val($('#part1q').val() * 1);
    $('.part1AL').val($('#part1w').val() - $('#calc1').val());
    $('.part1AW').val($('#part1d').val() - $('#calc2').val());    
//part B
//overriding
   $("#partB").find(".part1A").val($('#part1q').val() * 2);    
});

HTML

<input class="values" id="calc1" value="1.4375">
<input class="values" id="calc2" value=".25">

<div class="wrap">
  <!--part 1-->
  <!--part 1 input-->
  <div class="partwrap">
    <div class="partdescr">
      <div class="partname">Part Number: <input id="part1"></div>
      <div class="partdata">Qty <input id="part1q"></div>
      <div class="partdata">Width <input id="part1w"></div>
      <div class="partdata">Height <input id="part1h"></div>
      <div class="partdata">Depth <input id="part1d"></div>

    </div>
    <!--part 1 output-->
    <div class="partdescr">
      <div class="parts">Part Name</div>
      <div class="parts">Qty</div>
      <div class="parts">Length</div>
      <div class="parts">Width</div>
      <div class="parts">Height</div>
    </div>

    <div>
      <div class="parts" id="partA">Part A
      <input class="part1A" class="parts">
      <input class="part1AL" class="parts">
      <input class="part1AW" class="parts">
      <input class="part1AH" class="parts">
    </div>
    <div>
      <div class="parts" id="partB">Part B
      <input class="part1A" class="parts">
      <input class="part1AL" class="parts">
      <input class="part1AW" class="parts">
      <input class="part1AH" class="parts">
    </div>

  </div>
</div>

Working Demo

Answer 2

实际的方程式根本没有任何意义，所以我将数据组织成简单的类别。它可能不准确，但可以很容易地根据您的特定需求进行定制。每行输入结果显示在 2 个输出中。顶部的 2 个输入适用于所有行 2 输出。请注意，将输入事件绑定到<form> 比任何键盘事件都要好。唯一需要做的工作是添加表格行，这很容易，因为它们是相同的，如果动态附加它们会更容易（这完全是一个新问题）。

参考文献

input event

<input type="number">

<output></output>

.valueAsNumber

.toFixed()

Ternary Condition Operator

Dereferencing jQuery Objects

.on()

.each()

.closest()

.find()

---

Demo中评论的细节

演示

/* Delegate the input event on the <form>
|| On each() output.G and output.O...
|| Find the <tr> they are in by using .closest()
|| Next store all the input valueAsNumber into variables
|| T1 and T2 variables value are determined by ternary
|| conditions (if(condition)) ?) true : false
|| Finally the totals are displayed in the outputs
*/
$("#invForm").on('input', function() {
  $('.G,.O').each(function(idx) {
    var row = $(this).closest('tr');
    var q = row.find('.Q')[0].valueAsNumber;
    var w = row.find('.W')[0].valueAsNumber;
    var h = row.find('.H')[0].valueAsNumber;
    var d = row.find('.D')[0].valueAsNumber;
    var m = $('#metric')[0].valueAsNumber;
    var i = $('#imperial')[0].valueAsNumber;
    var T1 = ($(this).hasClass('G')) ? 1 : 0.578036672;
    var T2 = ($(this).hasClass('O')) ? i : m;
    var t = (q * w * h * d * T1 * T2).toFixed(2);
    $(this).val(t);
  });
  
});

* {
  margin: 0;
  padding: 0;
}

.inventory {
  width: 96%;
  table-layout: fixed;
}

td {
  border: 1px solid #000
}

.name {
  width: 10%;
}

.data,
.total {
  width: 10%;
}

input {
  width: 12ch;
  display: inline-block;
}

input[type=number] {
  width: 8ch;
  text-align: right;
  padding: 0 2px 0 1px
}

output {
  text-align: right;
  display: inline-block;
  width: 6ch;
}


}

<!-- Use a <table> wrapped in a <form> -->
<!-- If data is numbers consider <input type='number'> -->
<!-- <output> tags can handle .val(), .text(), or .html()-->
<form id='invForm'>
  <label for='metric'>Metric</label>
  <input id="metric" value="1" type='number' step='.01'>
  <label for='imperial'>Imperial</label>
  <input id="imperial" value="1" type='number' step='.01'>

  <table class="inventory">
    <thead>
      <tr>
        <th class='name'>Part Name</th>
        <th class="name">Part Number</th>
        <th class="data">Qty</th>
        <th class="data">Width</th>
        <th class="data">Height</th>
        <th class="data">Depth</th>
        <th class="total">Total Grams</th>
        <th class='total'>Total Ounces</th>
      </tr>
    </thead>
    <tbody>
    <!--Each row is identical in layout #IDs are not necessary-->
      <tr>
        <td><input class='part P' value='ChemX'></td>
        <td><input class='part N' value='X2k9'></td>
        <td><input class='part Q' type='number' step='1' min='0'></td>
        <td><input class='part W' type='number' step='.01' min='0'></td>
        <td><input class='part H' type='number' step='.01' min='0'></td>
        <td><input class='part D' type='number' step='.01' min='0'></td>
        <td><output class='part G'></output></td>
        <td><output class='part O'></output></td>
      </tr>
     <!--End of first data row-->
      <tr>
        <td><input class='part P' value='ChemZ'></td>
        <td><input class='part N' value='Zi96u'></td>
        <td><input class='part Q' type='number' step='1' min='0'></td>
        <td><input class='part W' type='number' step='.01' min='0'></td>
        <td><input class='part H' type='number' step='.01' min='0'></td>
        <td><input class='part D' type='number' step='.01' min='0'></td>
        <td><output class='part G'></output></td>
        <td><output class='part O'></output></td>
      </tr>
    </tbody>
  </table>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>