如何为 javascript 中的按钮列表提供单独的 ID？

Question

我过去 2-3 天一直在发布同样的问题，没有人给出合适的解决方案。

问题：

我在我的购物车页面有一组递增和递减按钮，用于在结账前管理产品数量。如果数量等于 1，我希望我的所有减少按钮都被禁用。我使用了一组 IF 语句来做到这一点。但是，这些 IF 条件仅在我的购物车页面一次包含一个项目时才有效。我已经找到了这个问题，但没有找到解决方案。问题是，每种情况下的按钮 ID 都相同，因此它会相互覆盖。所以，当每个购物车项目显示在页面上时，我想给不同的不同 id，带有 - 和 + 按钮。如何使我的代码像那样？

这是我的按钮和 IF 语句代码。

 {{#each products}}
            <tr>

                <td><img src="/product-images/{{this.product._id}}.jpg" 
style="width:70px;height:70px" alt=""></td>
                <td>{{this.product.Name}}</td>
                <td>Rs.{{this.product.Price}}</td>


                <td>
                    <button class="btn btn-info mr-3 cart-item-count " id="button(-)"
                        
onclick="changeQuantity('{{this._id}}','{{this.product._id}}','{{../user._id}}',-1)">-</button>
                    <span id="{{this.product._id}}">{{this.quantity}}</span>
                    <button class="btn btn-info ml-3 cart-item-count" id="button(+)"
                        
onclick="changeQuantity('{{this._id}}','{{this.product._id}}','{{../user._id}}',1)">+</button>
                </td>
                <td>
                    <button type="button" class="btn btn-danger">Remove</button>
                </td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <hr>
    <div class="float-right pr-5 pt-5">
        <h3 style="text-align:center">Total Rs. <span id="total">{{total}}</span></h3>
        <a href="/place-order" class="btn btn-primary mt-3" style="width:100%">Place Order</a>
    </div>
</div>
</section>
{{#each products}}
<h1 id="Quantity">{{this.quantity}}</h1>
{{/each}}
<script>
let Quantity = parseInt(document.getElementById('Quantity').innerHTML);

//console.log(Quantity)

if (Quantity == 1) {
    document.getElementById("button(-)").disabled = true
} else {
    document.getElementById("button(-)").disabled = false
}

if (Quantity == 10) {
    document.getElementById("button(+)").disabled = true
} else {
    document.getElementById("button(+)").disabled = false
}

function changeQuantity(cartId, proId, userId, count) {
    count = parseInt(count)
    let quantity = parseInt(document.getElementById(proId).innerHTML)
    let qty = quantity + count
    //console.log(qty)
    if (qty > 1) {
        document.getElementById('button(-)').disabled = false
    } else if (qty == 1 || qty == 10) {
        document.getElementById('button(-)').disabled = true
    }

    if (qty == 10) {
        document.getElementById('button(+)').disabled = true
    } else {
        document.getElementById('button(+)').disabled = false
    }

    $.ajax({
        url: '/change-product-quantity',
        data: {
            cart: cartId,
            product: proId,
            user: userId,
            count: count,
            quantity: qty
        },
        method: 'post',
        success: (response) => {

            document.getElementById(proId).innerHTML = quantity + count
            document.getElementById('total').innerHTML = response.total

            location.reload()

        }
})
}

注意：以上代码中的数量值取自Mongodb using Handlebars。

正如您在这张图片中看到的那样，禁用效果仅适用于第一行按钮而不适用于其余按钮。这个必须解决。

预期输出：

页面加载时必须禁用所有 - 按钮。

谢谢：

Answer 1

在您的 id 属性中添加 {{@index}}

h/t How to get index in Handlebars each helper?

如何为 javascript 中的按钮列表提供单独的 ID？

how to give seperate id to a list of buttons in javascript?

javascript

node.js

handlebars.js