Question

我使用jQuery动态创建了这些文本字段：

<div class="row"><input type="text" id="product_price_1"><input type="text" id="product_quantity_1"><input type="text" id="product_total_price_1"></div>
<div class="row"><input type="text" id="product_price_2"><input type="text" id="product_quantity_2"><input type="text" id="product_total_price_2"></div>
<div class="row"><input type="text" id="product_price_3"><input type="text" id="product_quantity_3"><input type="text" id="product_total_price_3"></div>

值来自数据库，行数不同这就是我在.js文件中所做的：

    $('#product_quantity_1').change(function() {
       $('#product_total_price_1').val(
            $('#product_price_1').val()*$('#product_quantity_1').val()
        );
    });

我做了什么工作，当我输入不同的产品数量时，总价格会发生变化我也想访问其他输入字段，并输入.change（）事件，但数字总是不同的怎么处理这个？谢谢！

Answer 1

您可以为相关元素指定一个公共类，例如所有价格元素ex

的公共类

<div class="row">
    <input type="text" id="product_price_1" class="product_price">
    <input type="text" id="product_quantity_1" class="product_quantity">
    <input type="text" id="product_total_price_1" class="product_total_price">
</div>
<div class="row">
    <input type="text" id="product_price_2" class="product_price">
    <input type="text" id="product_quantity_2" class="product_quantity">
    <input type="text" id="product_total_price_2" class="product_total_price">
</div>
<div class="row">
    <input type="text" id="product_price_3" class="product_price">
    <input type="text" id="product_quantity_3" class="product_quantity">
    <input type="text" id="product_total_price_3" class="product_total_price">
</div>

然后

$('.product_quantity').change(function () {
    $(this).next('.product_total_price').val(($(this).prev('.product_price').val() * this.value) || 0);
});

演示：Fiddle

jQuery：如何选择动态创建的html元素

1 个答案: