javascript - 如何创建一个 JavaScript 函数，处理多组输入，并以相同的方式进行数学处理

Question

我制作了这张表:https://jsfiddle.net/Hougaard114/7qy70wpo/看起来我想要它，但它并不像我想要的那样工作。目前，每个输入字段都有自己的名称，因此在 JavaScript 中也有自己的变量。

我想要的是一个带有最少变量的Javascript函数。每行发生的情况都是相同的。最后一行“u-værdi”吐出“isolans”的 1/sum 的结果。所以我想我可以制作一个如下所示的 JavaScript:

function isolansBeregn () {
  var calc1 = document.getElementById('lambda').value;
  var calc2 = document.getElementById('tykkelse').value;
  var result = calc2/calc1;
  var numb = result;
  numb = numb.toFixed(0);
  document.getElementById('isolans').innerHTML = numb;
  var uVærdi = 1/result;
  uVærdi = uVærdi.toFixed(3);
  document.getElementById('uværdi').innerHTML = uVærdi;}

它有效，但仅适用于第一行输入。即使我给下一行提供相同的 id，当我输入数字时什么也不会发生......所以现在看起来像这样:

HTML

       <table>
            <thead>
            <th colspan="4">Demo</th>
            </thead>
            <tbody>
                <tr>
                    <td style="width: 30%" class="tdh">Materiale</td>
                    <td style="width: 30%"class="tdh">Lambda værdi (λ<sub>50</sub>)</td>
                    <td style="width: 30%"class="tdh">Tykkelse (m)</td>
                    <td style="width: 10%"class="tdh">Isolans</td>
                </tr>
                <tr>
                    <td>Yderbeklædning</td>
                    <td><input type="number" id="lambda" placeholder="Skriv her" onchange="isolansBeregn()"></td>
                    <td><input type="number" id="tykkelse" placeholder="Skriv her" onchange="isolansBeregn()"></td>
                    <td id="isolans"></td>
                </tr>
                <tr>
                    <td>Isolering</td>
                    <td><input type="number" id="lambda2" placeholder="Skriv her" onchange="isolansBeregn()"></td>
                    <td><input type="number" id="tykkelse2" placeholder="Skriv her" onchange="isolansBeregn()"></td>
                    <td id="isolans2"></td>
                </tr>
                <tr>
                    <td>Inderbeklædning</td>
                    <td><input type="number" id="lambda3" placeholder="Skriv her" onchange="isolansBeregn()"></td>
                    <td><input type="number" id="tykkelse3" placeholder="Skriv her" onchange="isolansBeregn()"></td>
                    <td id="isolans3"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">U-værdi</td>
                    <td id="uværdi"></td>
                </tr>
            </tfoot>
        </table>

和 JavaScript

function isolansBeregn () {
  var calc1 = document.getElementById('lambda').value;
  var calc2 = document.getElementById('tykkelse').value;
  var calc3 = document.getElementById('lambda2').value;
  var calc4 = document.getElementById('tykkelse2').value;
  var calc5 = document.getElementById('lambda3').value;
  var calc6 = document.getElementById('tykkelse3').value;
  var result = calc2/calc1;
  var result2 = calc4/calc3;
  var result3 = calc6/calc5;
  var numb = result;
  numb = numb.toFixed(0);
  var numb2 = result2;
  numb2 = numb2.toFixed(0);
  var numb3 = result3;
  numb3 = numb3.toFixed(0);
  document.getElementById('isolans').innerHTML = numb;
  document.getElementById('isolans2').innerHTML = numb2;
  document.getElementById('isolans3').innerHTML = numb3;
  var uVærdi = 1/((result+result2)+result3);
  uVærdi = uVærdi.toFixed(3);
  document.getElementById('uværdi').innerHTML = uVærdi;}

感觉有点矫枉过正。

这对我来说是个问题，因为我希望用户能够使用不介意的 JavaScript 添加另一行，看起来与其他行完全一样。

提前谢谢您!

Answer 1

最小修改版本是:

• 将 id 更改为 name(uværdi 除外)

• 改变你的

  onchange="isolansBeregn()"
  

  至

  onchange="isolansBeregn(this)"
  

  因此它将对发生更改的元素的引用传递到函数中。

然后我们可以从该元素确定我们所在的行，从而找到该行中的其他 input 元素:

function isolansBeregn(input) {
    // Update this row
    var row = $(input).closest("tr");
    var calc1 = row.find('[name=lambda]').val();    // Probably worth converting these to number explicitly
    var calc2 = row.find('[name=tykkelse]').val();
    var result = Math.round(calc2 / calc1);         // Added rounding at the number rather than text level
    row.find('[name=isolans]').html(result).data("result", result); // ** see below

    // Get the sum of all the results
    var sum = $("[name=isolans"]).get().reduce(function(s, el) {
        return s + $(el).data("result");
    }, 0);
    var uVærdi = 1 / sum;
    uVærdi = uVærdi.toFixed(3);
    $('#uværd').html(uVærdi); // Again, perhaps .text()
}

关于我的 ** 见下文:我们将数字显示为文本，但稍后我们需要将其作为数字，因此我们使用 jQuery 的 data 功能将其存储为数字:出色地。我们可以使用文本将其重新解析为数字，但我采用了另一种方式。

reduce说明:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

注意:我使用了 jQuery，因为您标记了 jquery，但您的代码似乎没有在任何地方使用 jQuery。如果没有 jQuery，上面的操作也是完全可能的。唯一真正需要做的工作是 .closest 部分。

<小时/>

但是，这是事件委托(delegate)的一个很好的用例。您可以摆脱所有这些 onchange=... 属性，而是将 change Hook 到表格上，然后使用 e.target了解哪个实际的输入发生了变化。 (change 事件本身并不冒泡，但 jQuery 使其冒泡，因此事件委托(delegate)可以与之配合使用。)