javascript - 从下一个跨度中选择文本值

Question

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

这是我的工作 fiddle 的链接。 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/