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的顶部开始考虑第一个。

从您发布的代码中，我可以看到您还使用相同的名称绑定了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);
});

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

1 个答案: