Question

我正在设计购物车功能。更新鲜的jQuery我的布局是

这是我的设计

我想点击递增和递减按钮然后递增值并递减值乘以下面的输入字段值是我的jQuery代码

$('.increment-btn').on('click',function(){
    var $counter=$(this).closest('td').find('.counter');
    var currentVal = parseInt($counter.val());
    if (!isNaN(currentVal) && currentVal > 0)
    {$counter.val(currentVal - 1);
    }
});

这是HTML代码

<table Style="width:100%;" class="sumtable">
    <tr>
        <td id="info" Style="padding-left: 3%;width: 20%; ">Buy Price</td>
        <td > <span id="RS" style="color:#4286f4">₹</span> &nbsp;<input type="text" name ="f03" value="#BUY#" Style="border:none; border-bottom:1px solid #a0a6af;" id ="BUY" ></td>
        <td></td><td>&nbsp;  &nbsp;  &nbsp;</td> 
        <!--td ><input type="checkbox" name="vehicle" id="#c001#"></td-->
        <td>#CHECK#</td>
    </tr>
    <tr>
        <td id="info" Style="padding-left: 3%; ">MRP Price</td>
        <td> <span id="RS" style="color:#4286f4">₹</span> &nbsp;<input name="num1" type="text" value ="#MRP#" Style="border:none; border-bottom:1px solid #a0a6af;" id ="MRP_#PRODUCTID#" class="CLASS_MRP"  /></td>
    </tr>
    <tr>
        <td id="info" Style="padding-left: 3%;">Sell Price</td>
        <td> <span id="RS" style="color:#4286f4">₹</span> &nbsp;<input name="num2" type="text"   value="#SELL#" Style="border:none; border-bottom:1px solid #a0a6af;" ID="SELL_#PRODUCTID#" class="CLASS_SELL"  /></td>
    </tr>       
</table>
</div><br>
    <div Style="float:right;">
        <table Style="width:100%; float:right; line-height: 2;" >
        <tr>
            <td style="text-align:right;">Your Profit</td>
            <td><span id="RS" style="color:#4286f4">&nbsp; &nbsp; &nbsp; ₹ </span>&nbsp; <input name="num3" type="text" type="hidden" value="1" Style="border:none; border-bottom:1px solid #a0a6af; color:#2d992f; font-weight:700; text-align:center; " id="OUT_#PRODUCTID#"  class="CLASS_OUT"  >     <span id="liveResult"></span> </td> 
        </tr>   
        <tr>
            <td style="text-align:right;" id ="minimum">Minimum Quantity</td>
            <td style="text-align:center;"><input type="button" value="-" style="width: 30px;border-radius: 50%; background-color: white;height: 30px;    border: 1px solid #0953A3;" class="decrement-btn">
                <input id="AAA" type="text" Style="border:none; border-bottom:1px solid #a0a6af;text-align: center;" value="1" class="counter" >
                <input type="button" value="+" style="width: 30px;border-radius: 50%; background-color: white;height: 30px; border: 1px solid #0953A3;" class="increment-btn">
            </td>
            <td>


$(function () {
$('.increment-btn').on('click',function(){
    var $counter=$(this).closest('td').find('.counter');
    var currentVal = parseInt($counter.val());
    var total = 0;
    if (!isNaN(currentVal)) 
    { 
        $counter.val(currentVal + 1);   

    }
});
$('.decrement-btn').on('click',function(){
    var $counter=$(this).closest('td').find('.counter');
    var currentVal = parseInt($counter.val());
    if (!isNaN(currentVal) && currentVal > 0)
    {$counter.val(currentVal - 1);
    }
});

}）;

这是功能，我使用它的工作只增加和减少数字，但我想点击增量按钮增量值乘以输入字段值

Answer 1

试试这可能对你有帮助

＆＃13;

$(function() {
  $(".but").on("click",function() {
    var id=this.id;;
    var inc=id=="inc";
    var d = $("#input_data");
    var val = +d.val();
    if (inc)val++;else val--;
    d.val(val);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button"  id="dec"> - </button>  
<input type="number" id="input_data" value="1">        
<button type="button"  id="inc"> + </button>

＆＃13;

Answer 2

您可以尝试：

此处我管理的用户无法在文本框中输入负数，用户无法填写超过99999 。

$(function() {
  $(".but").on("click",function() {
    var id=this.id;;
    var inc=id=="inc";
    var d = $("#input_data");
    var val = +d.val();
    if (inc)val++;else val--;
    d.val(val);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button"  id="dec" class="but"> - </button>  
<input type="number" id="input_data" value="1" max-length="999999" min-length="0">        
<button type="button"  id="inc" class="but"> + </button>

单击时的乘法显示到具有不同ID的输入

2 个答案: