jQuery DOM追加元素 - 错误地访问每个循环

如果您将运行代码然后删除元素，然后添加更多（通过单击按钮），然后单击总和按钮 - 它不会显示任何结果。但如果我留下2个输入，它的效果很好。我该怎么做才能使添加更多输入成为可能，然后使功能正常工作？你可以看到在这个JSFiddle jQuery DOM追加元素 - 错误地访问每个循环

<html> 
<head> 
    <title> Simple math between 2 numbers </title> 
    <style> 
    input { 
     margin: 5vw; 
    } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     var num1, num2, result; 
     $("#addInput").click(function() { 
      var newId = $('input').length; 
      if (newId < 8) { //Up to 8 inputs 
       newId++; 
       $("<input type='number' id='number+newId+'/>").appendTo(".inputs"); 
      } 
     }); 
     $("#removeInput").click(function() { 
      var total = $('input').length; 
      if (total > 2) { //At least 2 inputs 
       $('input:last-child').remove(); 
      } 
     }); 
     $("#sum").click(function() { 
      var $counter = 0; 
      var numbers = {}; 
      var length = $('input').length; 
      var result = 0; 
      $('input').each(function(){ 
       $counter += 1; 
       numbers[$counter] = parseInt($('#' + 'number' + $counter).val()); 
       result += numbers[$counter]; 
      }); 
      $('#result').html(result); 
     }); 
     $("#howMuch").click(function() { 
      var total = $('input').length; 
      $('#result').html(total); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div class="inputs"> 
     <input type="number" id="number1" /> 
     <input type="number" id="number2" /> 
     <input type="number" id="number3" /> 
     <input type="number" id="number4" /> 
     <input type="number" id="number5" /> 
     <input type="number" id="number6" /> 
     <input type="number" id="number7" /> 
     <input type="number" id="number8" /> 
    </div> 
    <button id="addInput"> Add </button> 
    <button id="removeInput"> Remove </button> <br /> 
    <button id="sum"> sum </button> 
    <button id="sum"> sub </button> 
    <button id="sum"> mul </button> 
    <button id="sum"> div </button> <br /> 
    <button id="howMuch"> How much? </button> 
    <p id="result"> </p> 
</body> 
</html>

来源

2017-01-02 ofek 3103s

此行的结果：

$("<input type='number' id='number+newId+'/>").appendTo(".inputs");

是错误的来源，你的报价是错误的，它产生无效的HTML。修复它像这样：

$('<input type="number" id="number'+newId+'"/>').appendTo(".inputs");

它应该工作！

来源

2017-01-02 17:00:21 iCart

我定你的总和，问题是你真的古怪尝试输入的访问值时，你可以在每个循环中使用“这个”，这样的：

$("#sum").click(function() { 
      var $counter = 0; 
      var numbers = {}; 
      var length = $('input').length; 
      var result = 0; 
      $('input').each(function(){ 
       if($(this).val()!=''){ 
       result += parseInt($(this).val()); 
       } 
      }); 
      $('#result').html(result); 
     });

来源

2017-01-02 17:02:11 Imphusius

jQuery DOM追加元素 - 错误地访问每个循环

回答

相关问题