输入数量按钮加减

Question

在我的购物车页面中，用户可以增加或减少产品的数量，假设我有 3 个产品添加到我的购物车中，当我点击第三个产品的按钮数量时，它会增加或减少第一个产品的数量在列表中。

完整代码如下：

    <table class="col-md-12">
    <thead style="font-size: 15px;">
    <tr>
    <th class="th-delate">{{ 'sylius.ui.delete_product'|trans }}</th>

    <th class="th-product">{{ 'sylius.ui.item'|trans }}</th>

    <th class="th-details">{{ 'sylius.ui.unit_price'|trans }}</th>
    <th class="th-price">{{ 'sylius.ui.qty'|trans }}</th>
    <th class="th-total th-add-to-cart">{{ 'sylius.ui.total'|trans }}</th>
    </tr>
    </thead>
    <tbody>
    {% for item in cart.items %}

<tr>
    <td class="th-delate"><a href="#"><button type="button" data-redirect="{{ path('sylius_shop_cart_summary') }}" data-url="{{ path('sylius_shop_ajax_cart_item_remove', {'id': item.id}) }}" class="ui circular icon button sylius-cart-remove-button" data-csrf-token="{{ csrf_token(item.id) }}"><i class="remove icon"></i></button></a></td>
    <td class="th-product">{% include '@SyliusShop/Product/_info.html.twig' with {'variant': product_variant} %}</td>
    <td style="text-align: center" class="th-details">
        {% if item.unitPrice != item.discountedUnitPrice %}
            <span class="sylius-regular-unit-price">{{ money.convertAndFormat(item.unitPrice) }}</span>
        {% endif %}
        <span style="color:#f00;font-weight: bold;font-size: 15px;" class="sylius-unit-price">{{ money.convertAndFormat(item.discountedUnitPrice) }}</span>
    </td>
    <td class="th-price">
        <div class="cart-plus-minus">
            <div class="numbers-row">
                <div onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) result.value--;return false;" class="dec qtybutton"><i class="fa fa-minus">&nbsp;</i></div>

                <input type="text" style="max-width: 65px; border-radius: 0" class="qty" title="Qty" value="{{ item.quantity }}" min="1" id="qty" name="sylius_cart[items][0][quantity]">


                <div onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="inc qtybutton"><i class="fa fa-plus">&nbsp;</i></div>
            </div>
        </div>
    </td>

    <th style="color:#df3737;font-weight: bold;font-size: 15px;" class="td-add-to-cart"><a style="font-weight: bold;font-size: 15px;" href="#"> {{ money.convertAndFormat(item.subtotal) }}</a></th>
</tr>



    {% endfor %}
    </tbody>

    </table>

我想增加或减少我点击的产品的数量，而不是列表中的第一个。

我正在使用 symfony 3

Answer 1

这是因为当您的购物车中有三件商品时，您有三个输入（类型 = 文本），ID 为“数量”。因此，单击哪个增量元素并不重要，代码指的是三个元素中的第一个元素。您必须在此处为每个输入提供不同的 id 值。它可以动态完成。

希望这会有所帮助！

Answer 2

试试这个

<div onClick="var result = document.getElementById('qty' ~ item.id); var qty 
= result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) result.value-
-;return false;" class="dec qtybutton"><i class="fa fa-minus">&nbsp;</i>
</div>

<input type="text" style="max-width: 65px; border-radius: 0" class="qty" 
title="Qty" value="{{ item.quantity }}" min="1" id="'qty' ~ item.id" 
name="sylius_cart[items][0][quantity]">

<div onClick="var result = document.getElementById('qty' ~ item.id); var qty 
= result.value; if( !isNaN( qty )) result.value++;return false;" class="inc 
qtybutton"><i class="fa fa-plus">&nbsp;</i></div>

Answer 3

下面这个例子似乎运行良好：

            <div onClick="var result = document.getElementById('{{ item.id }}'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) result.value--;return false;" class="dec qtybutton"><i class="fa fa-minus">&nbsp;</i></div>

            <input type="text" style="max-width: 65px; border-radius: 0" class="qty" title="Qty" value="{{ item.quantity }}" min="1" id="{{ item.id }}" name="sylius_cart[items][][quantity]">


            <div onClick="var result = document.getElementById('{{ item.id }}'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="inc qtybutton"><i class="fa fa-plus">&nbsp;</i></div>

Answer 4

<div id="field1">field 1
    <button type="button" id="sub" class="sub">-</button>
    <input type="number" id="1" value="1" min="1" max="3" />
    <button type="button" id="add" class="add">+</button>
</div>
<div id="field2">field 2
    <button type="button" id="sub2" class="sub">-</button>
    <input type="number" id="2" value="1" min="1" max="3" />
    <button type="button" id="add2" class="add">+</button>
</div>


    $(document).ready(function(){
    $('.add').click(function () {
        if ($(this).prev().val() < 3) {
          $(this).prev().val(+$(this).prev().val() + 1);
        }
    });
    $('.sub').click(function () {
        if ($(this).next().val() > 1) {
          if ($(this).next().val() > 1) $(this).next().val(+$(this).next().val() - 1);
        }
    });
    });