Question

我有一个基于ajax响应动态生成输入字段的表单。我想要做的是将第一个跨度的tet值乘以用户输入，并在第三个跨度中显示结果。我的功能在html表结构中正常工作，但不能使其在跨度中工作。

这是我工作小提琴的链接。 https://jsfiddle.net/zj5bca4g/1/

这是我遇到的问题，我试图保持相同的结构。 https://jsfiddle.net/fg5ygrke/

<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>

和JS。

$('.quantity').on('input', function() {
  var $tr = $(this).next('span');
  var cost = parseFloat($tr.find('.cost').text()) || 0;
  var quantity = parseInt($(this).val(), 10) || 0;
  $tr.find('.total').text('Total: ' + cost * quantity);
})

Answer 1

你可以使用

的.next（）

和

.prev（）

JQuery的功能

类似这样的事情

$('.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);
})

这是一个jsFiddle

https://jsfiddle.net/fg5ygrke/2/

Answer 2

Spans没有值属性，.find()搜索后代元素。您需要.next()和.prev()

$('.quantity').on('input', function() {
  var cost = $(this).prev('.cost').text();
  var quantity = parseInt($(this).val(), 10) || 0;
  $(this).next('.total').text('Total: ' + cost * quantity);
})

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

从下一个范围中选择文本值

2 个答案: