Question

我有一个动态的表单，它会计算持续时间。我可以通过单击添加新行来插入行。我的问题从无法计算的第二行开始，因为它是动态的。你可以帮我解决这个问题。

由于

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var FieldCount = 1; //to keep track of text box added
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      FieldCount++;
      wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal()" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal()" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal()" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal()" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
    }
  });

  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

function cal() {
  var fromhours = parseInt(document.getElementById('fromhours').value) * 60;
  var fromminutes = parseInt(document.getElementById('fromminutes').value);
  var tohours = parseInt(document.getElementById('tohours').value) * 60;
  var tominutes = parseInt(document.getElementById('tominutes').value);
  var resultfrom = fromhours + fromminutes;
  var resultto = tohours + tominutes;
  var result = resultto - resultfrom;
  var hourresult = parseInt(result / 60);
  var minutesresult = (result - (hourresult * 60));
  document.getElementById('resulthours').value = '0' + hourresult.toFixed(0);
  document.getElementById('resultminutes').value = ('0' + minutesresult).slice(-2);

}

input[type=text] {
  width: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From &rarr;
<input type="text" name="fromhours" id="fromhours" onblur="cal()" />:
<input type="text" name="fromminutes" id="fromminutes" onblur="cal()" />| To &rarr;
<input type="text" name="tohours" id="tohours" onblur="cal()" />:
<input type="text" name="tominutes" id="tominutes" onblur="cal()" />| Result &rarr;
<input type="text" name="resulthours" id="resulthours" />:
<input type="text" name="resultminutes" id="resultminutes" />
<br />
<br />
<div class="input_fields_wrap"></div>

我的问题是从第二行我无法得到我的结果

Answer 1

您需要通过添加x来引用当前元素行ID，如下所示

  wrapper.append('From &rarr; 
<input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal(x)" /> ...


   function cal(x) {
      var fromhours = parseInt(document.getElementById('fromhours'+x).value) *   60;
   ...

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var FieldCount = 1; //to keep track of text box added
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      FieldCount++;
      wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal('+FieldCount +')" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal('+FieldCount +')" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal('+FieldCount +')" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal('+FieldCount +')" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
    }
  });

  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

function cal(x) {
 x=x||"";
  var fromhours = parseInt(document.getElementById('fromhours'+x).value) * 60;
  var fromminutes = parseInt(document.getElementById('fromminutes'+x).value);
  var tohours = parseInt(document.getElementById('tohours'+x).value) * 60;
  var tominutes = parseInt(document.getElementById('tominutes'+x).value);
  var resultfrom = fromhours + fromminutes;
  var resultto = tohours + tominutes;
  var result = resultto - resultfrom;
  var hourresult = parseInt(result / 60);
  var minutesresult = (result - (hourresult * 60));
  document.getElementById('resulthours'+x).value = '0' + hourresult.toFixed(0);
  document.getElementById('resultminutes'+x).value = ('0' + minutesresult).slice(-2);

}

input[type=text] {
  width: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From &rarr;
<input type="text" name="fromhours" id="fromhours" onblur="cal()" />:
<input type="text" name="fromminutes" id="fromminutes" onblur="cal()" />| To &rarr;
<input type="text" name="tohours" id="tohours" onblur="cal()" />:
<input type="text" name="tominutes" id="tominutes" onblur="cal()" />| Result &rarr;
<input type="text" name="resulthours" id="resulthours" />:
<input type="text" name="resultminutes" id="resultminutes" />
<br />
<br />
<div class="input_fields_wrap"></div>

Answer 2

我不是JS专家，但它可能与事实有关，你引用相同ID属性下的行？据我所知，你没有在代码中指定要计算哪一行。

请参阅@Bellash答案以获取可能的解决方案

Answer 3

您忘记在fieldCount函数中传递cal()数字并将其与字段ID连接，因此cal()函数始终使用第一行文本字段。我已经为您更正了您的代码段。

＆＃13;

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var FieldCount = 1; //to keep track of text box added
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      FieldCount++;
      wrapper.append('From &rarr; <input type="text" name="fromhours" id="fromhours' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> : <input type="text" name="fromminutes" id="fromminutes' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> | To &rarr; <input type="text" name="tohours" id="tohours' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> : <input type="text" name="tominutes" id="tominutes' + FieldCount + '" onblur="cal(' + FieldCount + ')" /> | Result &rarr; <input type="text" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
    }
  });
  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

function cal(fieldCount) {
  console.log(arguments);
  var fromhours = parseInt(document.getElementById('fromhours' + fieldCount).value) * 60;
  var fromminutes = parseInt(document.getElementById('fromminutes' + fieldCount).value);
  var tohours = parseInt(document.getElementById('tohours' + fieldCount).value) * 60;
  var tominutes = parseInt(document.getElementById('tominutes' + fieldCount).value);
  var resultfrom = fromhours + fromminutes;
  var resultto = tohours + tominutes;
  var result = resultto - resultfrom;
  var hourresult = parseInt(result / 60);
  var minutesresult = (result - (hourresult * 60));
  document.getElementById('resulthours' + fieldCount).value = '0' + hourresult.toFixed(0);
  document.getElementById('resultminutes' + fieldCount).value = ('0' + minutesresult).slice(-2);

}

＆＃13;

input[type=text] {
  width: 25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="margin-left:28px;" type="image" class="add_field_button" value="Add a new row" />
<br />From &rarr;
<input type="text" name="fromhours" id="fromhours1" onblur="cal(1)" />:
<input type="text" name="fromminutes" id="fromminutes1" onblur="cal(1)" />| To &rarr;
<input type="text" name="tohours" id="tohours1" onblur="cal(1)" />:
<input type="text" name="tominutes" id="tominutes1" onblur="cal(1)" />| Result &rarr;
<input type="text" name="resulthours" id="resulthours1" />:
<input type="text" name="resultminutes" id="resultminutes1" />
<br />
<br />
<div class="input_fields_wrap"></div>

＆＃13;

Answer 4

您必须获取唯一ID并在计算中使用它。在JS中，我用on keyup替换了函数，并添加了一个语句来阻止#include <iostream> using namespace std; int main() { int size = 0; double temp[size]; double sum = 0; double avg; cout<<"Enter how many number would you like to type: "; cin>>size; for (int i=0; i < size; ++i ) { cout<<endl<<"Number "<< i + 1<<": "; cin>>temp[i]; sum=sum+temp[i]; } avg=sum/size; cout <<endl<< "The sum of the array elements is: " << sum << endl; cout << "The average of the array elements is: " << avg << endl<<endl; system("pause"); return 0; }

<强> JS

NaN

<强> HMTL

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var FieldCount = 1; //to keep track of text box added
  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      FieldCount++;
      wrapper.append('From &rarr; <input type="text" class="cal" name="fromhours" id="fromhours' + FieldCount + '" /> : <input type="text" class="cal" name="fromminutes" id="fromminutes' + FieldCount + '" /> | To &rarr; <input type="text" class="cal" name="tohours" id="tohours' + FieldCount + '" /> : <input type="text" class="cal" name="tominutes" id="tominutes' + FieldCount + '" /> | Result &rarr; <input type="text" class="cal" name="resulthours" id="resulthours' + FieldCount + '" /> : <input type="text" class="cal" name="resultminutes" id="resultminutes' + FieldCount + '" /><br /><br />'); //add input box
    }
  });

  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

$('body').on('keyup', '.cal', function () {
    var id = $(this).attr('id').substr(-1),
        fromhours = ~~$('#fromhours' + id).val(),
        fromminutes = ~~$('#fromminutes' + id).val(),
        tohours = ~~$('#tohours' + id).val(),
        tominutes = ~~$('#tominutes' + id).val();

    if (fromhours != '' && fromminutes != '' && tohours != '' && tominutes != '') {
        var resultfrom = (fromhours * 60) + fromminutes,
            resultto = (tohours * 60) + tominutes,
            result = resultto - resultfrom,
            hourresult = ~~(result/60),
            minuteresult = ~~(result - hourresult * 60);
        $('#resulthours' + id).val(hourresult);
        $('#resultminutes' + id).val(minuteresult);
    }
});

Javascript动态输入计算

4 个答案: