Question

如果我的表格很少。如何输入我需要的输入？

    <label> First </label>
    <input type="number" value="1" min="1">
    <label>22</label>
    <span>There I need value in input * val in label</span>

    <label> Second </label>
    <input type="number" value="1" min="1">
    <label>12</label>
    <span>There I need value in input * val in label</span>
................................

我该怎么做？也许我需要使用循环？

Answer 1

不确定您要尝试访问哪个input。您可以使用document.querySelectorAll("input[type=number]").

它将返回一个数组，所有输入的类型为＆＃34; number＆＃34;。通过它们迭代得到你需要的东西

Answer 2

您可以向控件添加id，然后使用jquery通过id访问它。

<label> First </label>
<input type="number" value="1" min="1" id="input1">
<label id="label1">22</label>
<span id="span1">There I need value in input * val in label</span>

<label> Second </label>
<input type="number" value="1" min="1" id="input2">
<label id="label2">12</label>
<span id="span2">There I need value in input * val in label</span>

然后在你的dcoument.ready上计算它就像这样：

$( document ).ready(function() {
var result1=$(#input1).val()*$(#label1).val();
$('#span1').val(result1);

var result2=$(#input2).val()*$(#label2).val();
$('#span1').val(result2);
});

在你给控件id之后你可以做得更好，循环遍历所有输入并动态地乘以它们：

    var i=0;
    $("#myForm input[type=text]").each(function() {
        i=i+1;
        $('#span'+i).val($('#input'+i)*('#label'+i));            
    });

Answer 3

您可以使用for循环来循环所有输入，并使用addEventListener在输入更改时运行函数。然后只计算每个输入的值，并将span添加为textContent。

var inputs = document.querySelectorAll('input');

for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', function() {
    var val = this.value * Number(this.nextElementSibling.textContent);
    this.nextElementSibling.nextElementSibling.textContent = val;
  })
}

<label>First</label>
<input type="number" value="1" min="1">
<label>22</label>
<span>There I need value in input * val in label</span>

<label>Second</label>
<input type="number" value="1" min="1">
<label>12</label>
<span>There I need value in input * val in label</span>

如果您想在输入更改之前向spans添加值，可以将此部分代码添加到上一个。

var inputs = document.querySelectorAll('input');

for (var i = 0; i < inputs.length; i++) {
  var val = inputs[i].value * Number(inputs[i].nextElementSibling.textContent);
  inputs[i].nextElementSibling.nextElementSibling.textContent = val;

  inputs[i].addEventListener('change', function() {
    var val = this.value * Number(this.nextElementSibling.textContent);
    this.nextElementSibling.nextElementSibling.textContent = val;
  })
}

<label>First</label>
<input type="number" value="1" min="1">
<label>22</label>
<span>There I need value in input * val in label</span>

<label>Second</label>
<input type="number" value="1" min="1">
<label>12</label>
<span>There I need value in input * val in label</span>

值输入类型编号

3 个答案: