jQuery增加多个项目的数量和总价答案

【问题标题】：jQuery to increase quantity and total price for multiple itemsjQuery增加多个项目的数量和总价
【发布时间】：2020-01-17 10:43:09
【问题描述】：

我正在尝试让我的 jQuery 代码增加/减少数量并计算每件商品的总价。问题是，当我按下单个商品的数量增加/减少按钮时，购物车中所有商品的所有数量字段都更新为相同的值。总价仅给出第一项。

cart image

$(document).ready(function() {
    $(".item").on("input", ".quantity", function() {
        var price = +$(".price").data("price");
        var quantity = +$(this).val();
        $("#total").text("$" + price * quantity);
    })

    var $buttonPlus = $('.btn-plus');
    var $buttonMin = $('.btn-minus');
    var $quantity = $('.quantity');

    /*For plus and minus buttons*/
    $buttonPlus.click(function() {
        $quantity.val(Math.min(parseInt($quantity.val()) + 1, 999)).trigger('input');
    });

    $buttonMin.click(function() {
        $quantity.val(Math.max(parseInt($quantity.val()) - 1, 1)).trigger('input');
    });
});

<?php
function shoppingcartelement($productimg,$productname,$price,$productid){
$element="
<form action=\"cart.php?action=remove&id=$productid\" method=\"post\" class=\"cart-items\">
    <div class=\"item border rounded\">
        <div class=\"row\">
            <div class=\"col-md-3\">
                <img src=\"$productimg\" alt=\"img1\" class=\"img-fluid\">
            </div>
            <div class=\"col-md-2 bg-white\">
                <h5 class=\"pt-2\">$productname</h5>
                <p id=\"$productid\"></p>
                <h5 class=\"price pt-2\" data-price=\"$price\">$ $price</h5>
            </div>
            <div class=\"col-md-3 py-5 bg-white\">
                <div class=\"input-group\">
                    <span class=\"input-group-btn\">
                        <button type=\"button\" class=\"btn btn-info btn-minus\" data-type=\"minus\" data-field=\"quant[1]\">
                            <img style=\"height:15px\" width=\"15px\" src=\"./icon/minus.png\" alt=\"\">
                        </button>
                    </span>
                    <input type=\"text\" class=\"quantity form-control mx-1\" value=\"1\">
                    <span class=\"input-group-btn\">
                        <button type=\"button\" class=\"btn btn-info btn-plus\" data-type=\"plus\" data-field=\"quant[1]\">
                            <img style=\"height:15px\" width=\"15px\" src=\"./icon/plus.png\" alt=\"\">
                        </button>
                    </span>
                </div>
            </div>
            <div class=\"col-md-3 bg-white\">
                <h5 class=\"total my-5\">Total: <span id=\"total\">$ $price</span></h5>
            </div>
            <div class=\"col-md-1 bg-white\">
                <button type=\"submit\" class=\"bg-white mt-5\" style=\"border: none; outline:none;\" name=\"remove\">
                    <img style=\"height:30px\" width=\"30px\" src=\"./icon/x.png\" alt=\"\">
                </button>
            </div>
        </div>
    </div>
</form>
";
echo $element;
}

【问题讨论】：

ID 在 HTML 文档中必须是唯一的。
我如何做到这一点。该 PHP 文件中的数据是从我的数据库中获取的。
例如，您可以将您的产品 ID 作为后缀附加到 id="total"。但是你的 JS 部分也必须相应地处理所有这些不同的 ID。解决此问题的更好方法是使用类而不是 id，并根据其与 DOM 中触发按钮的关系找到要更新的正确 span 元素。
你有什么活生生的例子吗？

标签： php jquery

【解决方案1】：

您的点击处理程序正在查看 $quantity，它返回所有数量输入字段，而不仅仅是与被点击按钮对应的字段。试试这样的：

$buttonPlus.click(function() {
  $(this).closest('.input-group').find('.quantity').val(Math.min(parseInt($quantity.val()) + 1, 999)).trigger('input');
});

在此示例中，您正在寻找包装输入组容器并从该特定容器中获取输入字段。

【讨论】：

假设您在构建 DOM 时正在遍历项目，最简单的方法可能是使用计数变量增加 id。例如，如果您的产品 ID 是“12345”，则类似于“12345_1”，其中 1 是购物车中的第一个产品。不过，如果不了解您是如何构建它的，则不同的策略可能更有意义。