使用按钮 f 增加和减少数量答案

【问题标题】：Increasing and decreasing the quantity using buttons f使用按钮 f 增加和减少数量
【发布时间】：2020-09-21 09:54:20
【问题描述】：

我需要为按钮添加功能。我尝试将其添加到 php 文件中。

脚本在这里：


$(document).ready(function(){
        $document.on('click','#minus_button',function(){
            selected=$(this.attr("data-id"));

            quantity = parseInt($('#quantity[data-id="'+selected'"]').val());

            $('#quantity[data-id="'+selected'"]').val(quantity -1);


        });

        $document.on('click','#plus_button',function(){
            selected=$(this.attr("data-id"));

            quantity = parseInt($('#quantity[data-id="'+selected'"]').val());

            $('#quantity[data-id="'+selected'"]').val(quantity + 1);

        });
    });

这里是按钮：


<button type=\"button\" class=\"btn bg-light border rounded-circle\" id=\"minus_button\" data-id=\"$productid\"><i class=\"fas fa-minus\"></i></button>
<input type=\"text\" value=\"1\" class=\"form-control w-25 d-inline\" id=\"quantity\" data-id=\"$productid\">
<button type=\"button\" class=\" btn bg-light border rounded-circle\"id=\"plus_button\" data-id=\"$productid\"><i class=\"fas fa-plus\"></i></button>

我从数据库中获取了 product_id。按钮不起作用。如果您能提供帮助，我会很高兴。

【问题讨论】：

所以你向按钮添加事件监听器。点击事件，更新值。（或使用内置的 input `type="number"）
是你在php里面贴的吗？转义的引号暗示了这一点。
欢迎来到 SO！我知道很难找到正确的搜索关键字，但请在发布新问题之前尝试一下。我刚刚尝试了“javascript 按钮增加数量”，并在这里找到了许多您可以使用的代码的答案，例如 stackoverflow.com/questions/9186346/…、stackoverflow.com/questions/36567460/…、stackoverflow.com/questions/50086238/… ...
这能回答你的问题吗？ javascript onclick increment number
@FunkFortyNiner 你能重新打开那个吗？

标签： javascript php html ajax

【解决方案1】：

您当前的 jquery 代码有很多语法错误，我已经纠正了。另外，我在这里使用 id 而不是 class，因为您可能有许多具有相同 id 的按钮。

$(document).ready(function() {
  $(document).on('click', '.minus_button', function() {
    selected = $(this).attr("data-id");
    quantity = parseInt($('.quantity[data-id="' + selected + '"]').val());
    $('.quantity[data-id="' + selected + '"]').val(quantity - 1);
  });

  $(document).on('click', '.plus_button', function() {
    selected = $(this).attr("data-id");

    quantity = parseInt($('.quantity[data-id="' + selected + '"]').val());

    $('.quantity[data-id="' + selected + '"]').val(quantity + 1);

  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!--added class="minus_button"-->
<button type="button" class="btn bg-light border rounded-circle minus_button" id="minus_button" data-id="$productid"><i class="fa fa-minus"></i></button>
<!--added class="quantity"-->
<input type="text" value="1" class="form-control w-25 d-inline quantity" id="quantity" data-id="$productid">
<!--added class="plus_button"-->
<button type="button" class=" btn bg-light border rounded-circle plus_button" id="plus_button" data-id="$productid"><i class="fa fa-plus"></i></button>

【讨论】：

感谢您的回答，它确实有效。我还有一个问题。添加脚本后，我需要按数量计算总价格。但我做不到。跨度>
总价显示在哪里？你能添加更多的html代码吗？
@MelihAkıncı 如果答案有帮助，please accept and upvote。

【解决方案2】：

还有那个脚本来计算总价。但是以这种方式，我需要在上面添加数量。当我尝试添加时它不起作用。

<?php

                $total = 0;
                    if (isset($_SESSION['cart'])){
                        $product_id = array_column($_SESSION['cart'], 'product_id');

                        $result = $db->getData();
                        while ($row = mysqli_fetch_assoc($result)){
                            foreach ($product_id as $id){
                                if ($row['id'] == $id){
                                    cartElement($row['product_image'], $row['product_name'],$row['product_price'], $row['id']);
                                    $total = $total + (int)$row['product_price'];
                                }
                            }
                        }
                    }else{
                        echo "<h5>Cart is Empty</h5>";
                    }

                ?>

【讨论】：