Javascript 输入数量按钮加号和减号

在我的购物车页面中，用户可以增加或减少产品的数量，假设我的购物车中添加了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>

{{'sylius.ui.delete_乘积{124; trans}}
{{'sylius.ui.item'|trans}}
{{'sylius.ui.unit|price'{trans}}
{{'sylius.ui.qty'| trans}}
{{'sylius.ui.total'| trans}}
{cart.items%中的项目为%s}
{%include'@SyliusShop/Product/_info.html.twig'和{'variant'：Product_variant}%}
{%if item.unitPrice！=item.discountedUnitPrice%}
{{money.convertAndFormat（item.unitPrice）}
{%endif%}
{{money.convertAndFormat（item.discountedUnitPrice）}
{%endfor%}

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

---

我使用symfony 3，这是因为当您的购物车中有三个项目时，您有三个id为“qty”的输入（type=text）。因此，无论单击哪个增量元素，代码都引用三个元素中的第一个元素。您必须在此处为每个输入提供不同的id值。它可以动态完成

---

希望这有帮助

这是因为当购物车中有三个项目时，您有三个id为“qty”的输入（type=text）。因此，无论单击哪个增量元素，代码都引用三个元素中的第一个元素。您必须在此处为每个输入提供不同的id值。它可以动态完成

希望这有帮助

试试这个

<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>

试试这个

<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>

---

下面的示例似乎运行良好：

            <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>

---

下面的示例似乎运行良好：

            <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>

字段1
-
+
字段2
-
+
$（文档）.ready（函数（）{
$（'.add'）。单击（函数（）{
if（$（this.prev（）.val（）<3）{
$（this.prev（）.val（+$（this.prev（）.val（）+1）；
}
});
$（'.sub'）。单击（函数（）{
if（$（this）.next（）.val（）>1）{
if（$（this.next（）.val（）>1）$（this.next（）.val（+$（this.next（）.val（）-1）；
}
});
});

字段1
-
+
字段2
-
+
$（文档）.ready（函数（）{
$（'.add'）。单击（函数（）{
if（$（this.prev（）.val（）<3）{
$（this.prev（）.val（+$（this.prev（）.val（）+1）；
}
});
$（'.sub'）。单击（函数（）{
if（$（this）.next（）.val（）>1）{
if（$（this.next（）.val（）>1）$（this.next（）.val（+$（this.next（）.val（）-1）；
}
});
});

您应该尝试一下，当您有一个关于为什么不管理它/您要解决的错误（如果尚未在中找到）的确切问题时，请回来查看列表在哪里？在你的例子中，qty.只有一个输入。发布你的完整代码。在好的一天，我会给你一些线索：你需要首先建立一个多个产品的列表。然后，您将意识到需要添加id才能彼此交互。然后您会发现您需要更好的事件管理，并且可能需要将js代码与html分开。当你学会了如何将一个事件（如

单击

）绑定到一个元素时，你可能会更好地了解应该问什么。你应该试一试，当你有一个关于为什么不管理它/你要解决的错误（如果还没有找到）的确切问题时，你会回来问列表在哪里？在你的例子中，qty.只有一个输入。发布你的完整代码。在好的一天，我会给你一些线索：你需要首先建立一个多个产品的列表。然后，您将意识到需要添加id才能彼此交互。然后您会发现您需要更好的事件管理，并且可能需要将js代码与html分开。当您学会如何将事件（如

单击

）绑定到元素时，您可能会更好地了解该询问什么您是对的，我遇到了这个问题，因为所有输入都具有相同的id，我将立即尝试修复它，我会让您知道。您确实这样做：）您是对的，我有这个问题，因为所有的输入都有相同的id，我现在会尝试修复它，我会让你知道。你确定要这样做：）我已经尝试了你的例子，但它不起作用。我已经编辑了我的代码，现在似乎工作得很好。你能检查一下我的答案并告诉我你是否一切都好。谢谢，我的代码有语法错误，因为我是新手。无论如何，你的答案是相似的，应该可以解决这个问题。我试过你的例子，但不起作用。我已经编辑了我的代码，现在似乎工作得很好。你能检查一下我的答案并告诉我你是否一切都好。谢谢，我的代码有语法错误，因为我是新手。无论如何，你的答案是相似的，应该能解决问题。