javascript - 添加购物车表行项目的数量

Question

我在foreach中有以下标记:

@foreach($addedToCart as $item)
    <tr class="cart-row">
        <td>{{ $item->product->name }}</td>
        <td>{{ $item->product->price }}</td>
        <td>
            <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
            <input type="text" id="number" class="totalQuantity" value="1" />
            <div class="value-button" id="increase" class="increase" data-unit-price="{{ $item->product->price }}" onclick="increaseValue()" value="Increase Value" data-value="1">+</div>
        </td>
    </tr>
@endforeach

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <h3>Total Amount : $ <span id="totalAmount"> 0</span></h3>
</div>

Jquery:

$('#increase').on("click", function () {
    var st = 0;
    $('.cart-row').each(function () {
        var i = $('#increase', this);
        var up = $(i).data('unit-price');
        var q = $('.totalQuantity').val();
        st = st + (up * q);
    });
    $('#totalAmount').text(st);
});

问题是，它仅适用于第一行。<tr></tr>位于foreach每个 tr 都有类 cart-row .

我错过了什么？

Answer 1

它仅适用于第一个元素，因为 DOM 中必须只有一个 ID。如果您放置多个，那么它将考虑 DOM 中从顶部开始的第一个。

从您发布的代码中，我可以看到您还绑定(bind)了同名的 class 。因此，如果您在 jquery 代码中使用它作为选择器，它将正常工作。

$('.increase').on("click", function () {
    var st = 0;
    $('.cart-row').each(function (i, obj) {
        var up = $('.cart-row:eq('+i+')').find('.increase').data('unit-price');
        var q = $('.cart-row:eq('+i+')').find('.totalQuantity').val();
        st = st + (up * q);
    });
    $('#totalAmount').text(st);
});