javascript - jquery/javascript 根据其他输入的值更改输入

Question

我正在尝试根据用户在输入字段中输入的内容进行一些数学计算。这些变化应该反射(reflect)在另一个领域。问题是，用户可以拥有多个表行，并且必须针对每一行单独进行计算。如果我对行(数字)进行硬编码，则一切正常。故事是这样的: 用户输入数量 --> 输入价格 --> 立即计算总数。

这是添加另一行的代码:

    var product_row = <?php echo $product_row; ?>;

function addProducts() {
html  = '<tr id="invoice-product-row' + product_row + '">';

html += '  <td class="text-left" style="width:90px"><input type="text" class="iquantity' + product_row + '" name="invoice_product[' + product_row + '][quantity]" value="" placeholder="<?php echo $entry_quantity; ?>" class="form-control" /></td>';
html += '  <td class="text-left"><input type="text" name="invoice_product[' + product_row + '][product_desc]" value="" placeholder="<?php echo $entry_product_desc; ?>" class="form-control" /></td>';    
html += '  <td class="text-left"><select class="itax' + product_row + '" name="invoice_product[' + product_row + '][tax]" class="form-control">';
<?php foreach ($tax_rates as $tax_rate){ 
$percent_rate = round($tax_rate['tr_rate'],4); ?>
html += '    <option value="<?php echo $tax_rate['tr_rate']; ?>"><?php echo $percent_rate. "%"; ?></option>';
<?php } ?>
html += '  </select></td>';

html += '  <td class="text-left" style="width:140px"><input type="text" class="iprice' + product_row + '" name="invoice_product[' + product_row + '][price]" value="" placeholder="<?php echo $entry_price; ?>" class="form-control" /></td>';
html += '  <td class="text-left" style="width:140px"><input type="text" class="itotal' + product_row + '" name="invoice_product[' + product_row + '][total]" value="" placeholder="<?php echo $entry_total_ex; ?>" class="form-control" /></td>';
html += '  <td></td>';
html += '  <td class="text-left"><button type="button" onclick="$(\'#invoice-product-row' + product_row + '\').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '  <td class="text-right"></td>';
html += '</tr>';

$('#products tbody').append(html);

$('.iprice2').bind('change keydown keyup',function (){
$('input.itotal2').val((($(this).val()* $('input.iquantity2').val())* 1.21).toFixed(2));
});

product_row++;

}
//--></script>

这部分代码现在是硬编码的(并且仅适用于第 2 行):

$('.iprice2').bind('change keydown keyup',function (){
$('input.itotal2').val((($(this).val()* $('input.iquantity2').val())*     1.21).toFixed(2));
});

但我希望它是动态的(对于每一行)。我也尝试过，但没有任何反应:

$('.iprice'' + product_row + ').bind('change keydown keyup',function (){
$('input.itotal'' + product_row + ').val((($(this).val()* $('input.iquantity'' + product_row + ').val())* 1.21).toFixed(2));
});

我感觉它与语法有关。有人可以解释一下吗？

提前致谢

Answer 1

存在语法错误。您需要将变量名称保留在字符串之外。

编辑:还存在变量范围的问题。 Product_row 未在事件处理程序内定义。如果你的product_row变量以1开头，那么你可以使用index()方法来获取product_row的值。

JS:

$('.iprice' + product_row).bind('change keydown keyup',function (){
    var elemIndex = $("input[class^='iprice']").index($(this))+1;
    $('input.itotal' + elemIndex).val((($(this).val()* $('input.iquantity' + elemIndex).val())* 1.21).toFixed(2));
});