JavaScript多个输入onChange

Question

我有一个问题。 在基于Zend框架的应用程序中有一个购物车（如表所示）。 每行都是购物篮中的产品。 每行都有两个表单字段：数量和价值（=价格*数量）。

我想通过JavaScript的onChange事件按数量（价格*数量）更改值，但我不知道如何使用行数> 1来执行此操作。在Zend视图的foreach循环中提供了输入。

JavaScript中是否有通用算法可以解决此问题？

Answer 1

每个值字段是否具有例如可以从数量字段的ID派生的ID属性？ 如果是这样，那将是非常快捷和轻松的。 鉴于：

<table id="basket">
    <tr class="basket-row">
        <td class="basket-quantity">
            <input type="text" id="product1234_quantity">
        </td>
        <td class="basket-subtotal">
            <input type="hidden" id="product1234_unitprice" value="20">
            <input type="text" readonly="readonly" id="product1234_subtotal">
        </td>
    </tr>
    <tr class="basket-row">
        <td class="basket-quantity">
            <input type="text" id="product5678_quantity">
        </td>
        <td class="basket-subtotal">
            <input type="hidden" id="product5678_unitprice" value="30">
            <input type="text" readonly="readonly" id="product5678_subtotal">
        </td>
    </tr>
</table>

在这里，每种产品的单价都处于隐藏属性中，但是我不知道您的购物车将其存储在何处。 假设您可以从某处获取它，并假设使用jQuery。

$('#basket').on('change','.basket-quantity input',function(e) {
    $('#'+this.id.replace('_quantity','_subtotal')).val(Number($('#'this.id.replace('_quantity','_unitprice')))*Number(this.value));
});

如果您不能从其他ID派生ID，则必须进行一些更复杂的DOM查询，但要点是，在处理程序运行时，必须确定要更新的输入。

您没有指定要使用的框架（如果有）。 在普通的JS中，这将需要大量额外的代码来使其跨浏览器兼容，以规范事件的附加和处理。

Answer 2

在每个您可以使用的

$(this).index()

例如

$("#jieguo_qian table tr:nth-child(4) td").each(function(){
    var tindex = $(this).index() + 1;

这样您就可以在差异tr中获得相同的td

th    th    th
td    td    td
td    td    td