简化多个输出计算

Question

我有下面的代码，它提供了我需要的计算，但我希望它能处理多个输出。

例如，部分A和部分B将具有相同的jQuery，除了部分B可以具有不同的乘法器或calc3等。

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

在下面的代码片段中，如果添加Qty、Width、Height和Depth，您将看到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 use类。

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>

Answer 2

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

参考文献

在演示中评论的详细信息

演示

​

/* 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>

​