Question

我做了添加函数，所以只要单击#add按钮的人都会添加新输入，并且我想进行循环并总结所有输入值

$(document).ready(function() {
  $('#square').on('click', '#add', function() {
    var value = $('#addmore').val();
    var html = value + '<input id="inp3" class="number"><br>';
    $('#secondary').append(html);
  })
})

$(document).ready(function() {
  $("#secondary").on("click", "#sum", function() {
    // I WANT LOOP HERE
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="square">
  <h1>calculate</h1>
  <div id="secondary">
    Your daily salary: <input id="salary" type="number" class="inp" placeholder="Enter your daily salary"> <input id="addmore"><button id="add">add more</button><br> Your business income daily <input id="income" type="number" class="inp" placeholder="Enter your daily salary"><br>
    <button id="sum">summarise</button>
    <input type="number" class="gl" readonly>
  </div>
</div>

Answer 1

您应该为输入添加value属性。

var html = value + '<input id="inp3" class="number" value=' + value +'><br>';

并使用each方法求和

var total = 0;
        $('#secondary .number').each(function(index, item){

          total += parseFloat($(item).val());
        })
        console.log(total);

$(document).ready(function() {
  $('#square').on('click', '#add', function() {
    var value = $('#addmore').val();
    var html = value + '<input id="inp3" class="number" value=' + value +'><br>';
    $('#secondary').append(html);
  })
})

$(document).ready(function() {
  $("#secondary").on("click", "#sum", function() {
    // I WANT LOOP HERE
    var total = 0;
        $('#secondary .number').each(function(index, item){
        
          total += parseFloat($(item).val());
        })
        console.log(total);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="square">
  <h1>calculate</h1>
  <div id="secondary">
    Your daily salary: <input id="salary" type="number" class="inp" placeholder="Enter your daily salary"> <input id="addmore"><button id="add">add more</button><br> Your business income daily <input id="income" type="number" class="inp" placeholder="Enter your daily salary"><br>
    <button id="sum">summarise</button>
    <input type="number" class="gl" readonly>
  </div>
</div>

Answer 2

如果您向所有类（如提到的@mplungjan）添加一致的类，则可以使用.each()遍历每个输入。在这里，我创建了类.pay并将其添加到您的输入元素中。然后，您可以使用unary plus operator将值转换为数字，以确保执行加法运算而不是串联运算。

请参见以下示例：

$(document).ready(function() {
  $('#square').on('click', '#add', function() {
    var value = $('#addmore').val();
    var html = value + '<input id="inp3" class="pay number"><br>';
    $('#secondary').append(html);
  })
})

$(document).ready(function() {
  $("#secondary").on("click", "#sum", function() {
    var sum = 0;
    $('.pay').each(function() {
      sum += +$(this).val(); // unary plus operator $(this).val(); will convert $(this).val(); to a number   
    });
    $(".gl").val(sum);
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="square">
  <h1>calculate</h1>
  <div id="secondary">
    Your daily salary: <input class="pay" id="salary" type="number"  placeholder="Enter your daily salary"> <input id="addmore" class="pay"><button id="add">add more</button><br> Your business income daily <input class="pay" id="income" type="number"  placeholder="Enter your daily salary"><br>
    <button id="sum">summarise</button>
    <input type="number" class="gl" readonly>
  </div>
</div>

如何添加jQuery循环以汇总每个输入

2 个答案: