如何增加单击按钮上的输入字段值

Question

when I click the pulse button, take the value at the input field and increase the value and show it in there but if I add more than one item (like the image shows https://i.stack.imgur.com/P3aDp.jpg ) then I click the pulse button second or another row the value increase on first-row input field NOT that relevant clicked row input field value (I'm adding that row using a .appent the reason when I click right side product it will add to the left side table) how can I solve it pls see blow I attached my code当我单击脉冲按钮时，获取输入字段中的值并增加该值并将其显示在那里，但如果我添加了多个项目（如图像显示https://i.stack.imgur.com/P3aDp. jpg ）然后我单击第二行或另一行的脉冲按钮，第一行输入字段的值增加而不是相关的单击行输入字段值（我正在使用 .appent 添加该行，原因是当我单击右侧产品时，它会添加到左侧表中）我该如何解决，请参阅我附上我的代码

 //increase product quantity function pluse() { let qnty = +$('#qnty').val(); let price = parseFloat($('#price').val()); qnty = qnty + 1; let subtotal = price * qnty; $('#qnty').val(qnty); $('#subtotal').val(subtotal.toFixed(2)); } //decrease product quantity function minus() { let qnty = +$('#qnty').val(); let price = +$('#price').val(); if (qnty > 1) { let newQnty = qnty - 1; let NewSubtotal = newQnty * price; $('#qnty').val(newQnty); $('#subtotal').val(NewSubtotal.toFixed(2)); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <tr> <td><input type="text" class="form-control-plaintext" name="product[]" value="<?php echo $row['product_name'];?>"></td> <td> <div class="input-group mb-3"> <div class="input-group-prepend"> <button type="button" class="input-group-text pluse" data-target="qnty" onclick="pluse(this)"><i class="fal fa-plus">+</i></button> </div> <div class="custom-file" style="width:100px"> <input type="text" class="form-control qnty " value="1" id="qnty" name="qnty[]"> </div> <div class="input-group-prepend"> <button type="button" class="input-group-text minus" onclick="minus()"><i class="far fa-minus"></i></button> </div> </div> </td> <td><input type="text" class="form-control-plaintext .price" name="price[]" id="price" value="1500.00"></td> <td><input type="text" class="form-control-plaintext" name="subtotal[]" id="subtotal" value="1500.00"></td> <td><a href="" class="btn text-danger">&cross;</a></td> </tr>

Answer 1

I'm learning english, please forgive my mistakes...我正在学习英语，请原谅我的错误...

You need to rewrite your functions to accept an objet by parameter like this:您需要重写函数以通过参数接受对象，如下所示：

function pluse(ObjectClicked)

also you need to send the object to the function like this:您还需要像这样将对象发送到函数：

 onclick="minus(this)"

you need learn about Jquery selections like "closest" , "find" etc您需要了解 Jquery 选择，如 "closest" 、 "find" 等

I rewrite your code, and I hope this code help you to understand:我重写了你的代码，希望这段代码能帮助你理解：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Font Awesome 4.7-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
     <div class="container" >
        <!--question HTML CODE-->
        <tr>
            
            <td>
                <div  class="input-group mb-3" >
                    <div class="input-group-prepend">
                        <button  type="button" class="input-group-text pluse" data-target="qnty" onclick="pluse(this)"><i class="fa fa-plus"></i></button>
                    </div>
                    <div class="custom-file" style="width:100px">
                        <input type="text" class="form-control qnty " value="5" id="qnty" name="qnty[]">
                    </div>
                    <div  class="input-group-prepend">
                        <button type="button" class="input-group-text minus" onclick="minus(this)"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <div class="input-group mb-3" >
                    <div class="input-group-prepend">
                        <button  type="button" class="input-group-text pluse" data-target="qnty" onclick="pluse(this)"><i class="fa fa-plus"></i></button>
                    </div>
                    <div class="custom-file" style="width:100px">
                        <input type="text" class="form-control qnty " value="6" id="qnty" name="qnty[]">
                    </div>
                    <div  class="input-group-prepend">
                        <button  type="button" class="input-group-text minus" onclick="minus(this)"><i class="fa fa-minus"></i></button>
                    </div>
                </div>

                <div class="input-group mb-3" >
                    <div  class="input-group-prepend">
                        <button  type="button" class="input-group-text pluse" data-target="qnty" onclick="pluse(this)"><i class="fa fa-plus"></i></button>
                    </div>
                    <div   class="custom-file" style="width:100px">
                        <input type="text" class="form-control qnty " value="6" id="qnty" name="qnty[]">
                    </div>
                    <div   class="input-group-prepend">
                        <button  type="button" class="input-group-text minus" onclick="minus(this)"><i class="fa fa-minus"></i></button>
                    </div>
                </div>

                <!-- Add the div class="input-group mb-3" that you need -->
                          
            </td>
            
        </tr>



        <!---->
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <!-- Question Script-->
    <script>
        //increase product quantity
        function pluse(ObjectClicked){
            // create new value adding 1
            var newQuantity= parseInt( $(ObjectClicked).closest('.input-group').find("input").val() ) + 1;

            //set the value to the closest input
            $(ObjectClicked).closest('.input-group').find("input").val(newQuantity);

            //maybe you need to redefine the formulas for sub and total 
        }

        //decrease product quantity
        function minus(ObjectClicked){
            // verfify the actual value                  
            var Quantity= parseInt( $(ObjectClicked).closest('.input-group').find("input").val() );

            //verfique the quantity
            if (Quantity>0)
                {
                // create new value substractig 1
                var newQuantity= parseInt( $(ObjectClicked).closest('.input-group').find("input").val() ) - 1;

                 //set the value to the closest input
                $(ObjectClicked).closest('.input-group').find("input").val(newQuantity);

              }

            //maybe you need to redefine the formulas for sub and total 
        
            }
        
    </script>
    <!-- -->
  </body>
</html>

You can add new lines manually or using Jquery您可以手动添加新行或使用 Jquery

如何增加单击按钮上的输入字段值

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-10-03 22:23:27

如何增加单击按钮上的输入字段值

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-10-03 22:23:27

解决方案1
0 已采纳 2020-10-03 22:23:27