编辑点击/文字的数量

问题描述

你好吗？

除了使用+和-按钮（加号和减号）外，我想知道如何允许用户编辑（文本）数量字段。简而言之，我该如何使用户输入要添加到购物车中的商品数量。有可能吗？

    ``` <div class="col-5 col-xs-5 col-md-2 border-bottom border-right" style=" text-align: center;"><br>
                <button product_id="{{ $product->id }}" class="btn_minus rounded-circle btn btn-danger">-</button>
                <span id="qtde_txt{{ $product->id }}">0</span>
                <button product_id="{{ $product->id }}" class="btn_plus rounded-circle btn btn-success"><b>+</b></button>
        </div>```

非常感谢！

解决方法

您可以使用JQuery轻松地执行此操作（例如）。对于显示的特定代码，可以使用以下脚本执行此操作：

$(".btn_plus").on("click",function()
{
    var span_element = $(this).prev(); //get the span element
    var quantity     = span_element.html(); //get the span value
    
    quantity = parseInt(quantity) + 1; //increment it
    
    span_element.html(quantity); //update the quantity in the span element
});

减号按钮也一样，除了您将减少数量。但是，如果您希望用户能够编辑数量，则只需将跨度更改为文本类型的输入即可：

<input type="text" id="qtde_txt{{ $product->id }}" value="0" />

但是您将需要更新我在上面编写的JQuery代码以映射更改。

您需要为此使用javascript，像这样的计数器/数字输入有多个示例。一个示例：Vanilla JS quantity increment and decrement buttons update only one input

count html