Question

我正在使用ASP.Net Web窗体开发的Web应用程序，该程序块带有用于引导样式的数量输入并遇到问题的块。加号和减号在增加或减少字段中的值时根本不起作用。我可以在Bootstrap中使用此解决方案吗？

数量

                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <button type="button" class="btn btn-primary" id="minus-btn"><i class="fa fa-minus"></i></button>
                                </div>
                                <asp:TextBox ID="txtQuantity"  cssClass="form-control form-control-sm"  runat="server" value="1" min="1" ClientIDMode="Static"></asp:TextBox>

                                <div class="input-group-prepend">
                                    <button type="button" class="btn btn-primary" id="plus-btn"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

Answer 1

使用下面的JQuery代码增加/减少数量文本框值

  function changeQuantity(type) {
        var currentQty = $("#txtQuantity").val();
        if (type == 'plus') {
            $("#txtQuantity").val(parseInt(currentQty, 10) + 1);
        }
        else {
              if((parseInt(currentQty, 10) - 1) < 0)
                $("#txtQuantity").val('0');  
              else{
                   $("#txtQuantity").val(parseInt(currentQty, 10) - 1);
        }
    }

并为按钮附加onclick事件

<div class="row">
<div class="col-xs-12 col-md-6">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <button type="button" class="btn btn-primary" onclick="changeQuantity('plus');" id="minus-btn">plus</button>
        </div>
          <asp:TextBox ID="txtQuantity"  cssClass="form-control form-control-sm"  runat="server" value="1" min="1" ClientIDMode="Static"></asp:TextBox>
        <div class="input-group-prepend">
            <button type="button" class="btn btn-primary" id="plus-btn" onclick="changeQuantity('minus');">minus</button>
        </div>
    </div>
</div>

Answer 2

由于有了面包屑，我从该线程中重构了一些代码建议，并解决了我的问题：

<script>
     function changeQuantity(type) {
        var currentQty = $("#txtQuantity").val();
        if (type == 'plus') {
            $("#txtQuantity").val(parseInt(currentQty, 10) + 1);
        }
        else if(currentQty < 2){
        $("#txtQuantity").val('1');
        }
         else{
            $("#txtQuantity").val(parseInt(currentQty, 10) - 1);
        }
    }
    </script>

单击按钮后输入数量值未增加

2 个答案: