点击显示乘法到具有不同 ID 的输入字段

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

你可以试试：

这里我管理用户不能在文本框中输入负数，和用户不能填写超过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>  

Answer 2

试试这个可能对你有帮助

$(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"> - </button>  
<input type="number" id="input_data" value="1">        
<button type="button"  id="inc"> + </button>