Question

我正在尝试开发一种购物车，允许用户使用滑块增加/减少购物车中商品的数量。

购物车中的每件商品都有自己的数量滑块。

问题是如果购物车中有多个商品，则移动第一个商品以外的任何商品的滑块只会影响第一个商品的数量。换句话说，如果我在购物车中有2个商品并且我使用滑块来增加第2个商品的数量，则第1个商品的数量会改变而不是第2个。带购物车的页面主要用php编写，具有根据javascript编写的滑块控件更改数量的功能。

我在这里做错了什么？

这是我的javascript函数代码：

    function updateTextInput(val) {
      document.getElementById('textInput').value=val; 
    }

这是我调用该函数的表格单元格的代码：

<td><input size='3' type='range' name=\"qty[{$row['product_id']}]\" min='0' max='".$stock."' onchange='updateTextInput(this.value);'>
        <input id='textInput' size='3' readonly value=\"{$_SESSION['cart'][$row['product_id']]['quantity']}\"></td>

感谢您的帮助。

Answer 1

DOM元素的

ID必须在整个页面中是唯一的。好吧，有些修复：

<td>
    <input size='3' type='range' name=\"qty[{$row['product_id']}]\" min='0' max='".$stock."' onchange='updateTextInput(this.value, {$row['product_id']});'>
    <input id='textInput_{$row['product_id']}' size='3' readonly value=\"{$_SESSION['cart'][$row['product_id']]['quantity']}\">
</td>

修复javascript：

function updateTextInput(val, product_id) {
    document.getElementById('textInput_' + product_id).value = val; 
}

影响所有元素的javascript函数

1 个答案: