Question

我有一个页面，其中包含动态生成的字段，这些字段将价格乘以用户输入，然后显示总计。我的初始函数效果很好，但现在我需要生成另一个div，其中包含之前生成的总计的每次迭代的总数。

我需要它为每个原件生成一个字段，其中显示的是原始值。

当前代码：

showHtml = ''
$('.quantity').on('input', function() {
  var $tr = $(this).next('span');
  var cost = parseFloat($(this).prev('.cost').text());
  var quantity = parseInt($(this).val());
  $($tr).text('Total: ' + cost * quantity);

});
$('#submit').click(function() {
  $(".total").each(function() {

    showHtml += '<span class="finished" name="finished[]">Total:</span><br/>';

    $('#showme').html(showHtml);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cost" name="cost[]" value="5">5</span>
<input type="text" class="quantity" name="quantity[]" value="">
<span class="total" name="total[]">0</span>
<br/>

<span class="cost" name="cost[]" value="5">5</span>
<input type="text" class="quantity" name="quantity[]" value="">
<span class="total" name="total[]">0</span>
<br/>

<span class="cost" name="cost[]" value="5">5</span>
<input type="text" class="quantity" name="quantity[]" value="">
<span class="total" name="total[]">0</span>
<br/><br/>

<input type="button" id="submit" value="submit">
<br/>

<div id="showme">
</div>

我不确定如何传递每个值，注意：原始字段也会生成。

Answer 1

只需要从跨度中获取.text（）。

showHtml = ''
$('.quantity').on('input', function() {
  var $tr = $(this).next('span');
  var cost = parseFloat($(this).prev('.cost').text());
  var quantity = parseInt($(this).val());
  $($tr).text('Total: ' + cost * quantity);

});
$('#submit').click(function() {
  $(".total").each(function() {
    curVal = $(this).text(); //add this
    showHtml += '<span class="finished" name="finished[]">Total:' + curVal + '</span><br/>';  //then add it to your showHtml variable

    $('#showme').html(showHtml);
  })
});

Answer 2

使用$(this).text()获取.each()循环中当前元素的内容。使用.replace()删除Total:前缀。

showHtml = ''
$('.quantity').on('input', function() {
  var $tr = $(this).next('span');
  var cost = parseFloat($(this).prev('.cost').text());
  var quantity = parseInt($(this).val());
  $($tr).text('Total: ' + cost * quantity);

});
$('#submit').click(function() {
  var total = 0;
  $(".total").each(function() {
    var thisVal = $(this).text().replace('Total: ', '');
    showHtml += '<span class="finished" name="finished[]">Total:' + thisVal + '</span><br/>';

    $('#showme').html(showHtml);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cost" name="cost[]" value="5">5</span>
<input type="text" class="quantity" name="quantity[]" value="">
<span class="total" name="total[]">0</span>
<br/>

<span class="cost" name="cost[]" value="5">5</span>
<input type="text" class="quantity" name="quantity[]" value="">
<span class="total" name="total[]">0</span>
<br/>

<span class="cost" name="cost[]" value="5">5</span>
<input type="text" class="quantity" name="quantity[]" value="">
<span class="total" name="total[]">0</span>
<br/><br/>

<input type="button" id="submit" value="submit">
<br/>

<div id="showme">
</div>

Answer 3

您需要某种动态添加系统，可以在现有的事件处理程序$('.quantity').on('input',...);中实现。下面我创建了一个示例，说明了为实现这一目标需要做些什么。

showHtml = ''

$('.quantity').on('input', function() {
  var $tr = $(this).next('span');
  var cost = parseFloat($(this).prev('.cost').text());
  var quantity = parseInt($(this).val());
  $($tr).text('Total: ' + cost * quantity);
  
  //create a total variable
   var total = 0;
   //loop through elements that contribute to the total
  $('.quantity').each(function(){
    //get a fresh cost and quantity like above
    var cost = parseFloat($(this).prev('.cost').text());
    var quantity = parseInt($(this).val());
    //check if the contents are numeric, NaN if nothing is entered (or text)
    if ($.isNumeric(cost * quantity)){
    //add to the total 
      total += (cost * quantity);
    }
  });
 //display the total below
  $('#total').html("Total: " + total);
});

$('#submit').click(function() {
  $(".total").each(function() {

    showHtml += '<span class="finished" name="finished[]">Total:</span><br/>';

    $('#showme').html(showHtml);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="cost" name="cost[]" value="5">5</span>
<input type="text" class="quantity" name="quantity[]" value="">
<span class="total" name="total[]">0</span>
<br/>

<span class="cost" name="cost[]" value="5">5</span>
<input type="text" class="quantity" name="quantity[]" value="">
<span class="total" name="total[]">0</span>
<br/>

<span class="cost" name="cost[]" value="5">5</span>
<input type="text" class="quantity" name="quantity[]" value="">
<span class="total" name="total[]">0</span>
<br/><br/>

<div id="total"></div>
<input type="button" id="submit" value="submit">
<br/>

<div id="showme">
</div>

从一个元素获取值到动态生成的元素

3 个答案: