Question

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

我想用onChange事件用JavaScript更改数量（价格*数量），但我不知道如何使用行数＆gt; 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查询，但重点是，在处理程序的运行时，您必须确定要更新的输入。 / p>

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

Answer 2

为每个你可以使用

$(this).index()

e.g

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

所以你可以在diff tr

中获得相同的td

th    th    th
td    td    td
td    td    td

JavaScript多输入onChange

2 个答案: