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

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);
})

这是一个JS小提琴

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>