购物车加减号计算总金额

Question

我有一个购物车，我需要获取项目增加的值（+和-）并将其添加到项目价格中。

购物车+/-控制

在我看来，代码是这样的。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <td class="cart-qty nostretch text-center"> <div class="spinner" data-addclass-on-smdown="spinner-sm"> <button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button> <input type="number" class="form-control" value="1" min="1" max="999" id="numberCol"> <button type="button" class="btn btn-icon rounded-circle" d="btnPlus"><i data-feather="plus"></i>+</button> </div> </td> <td class="cart-price text-right"> <span class="roboto-condensed bold" id="primaryTotal">Rs:@item.ItemPrice</span> </td> } 

并且我也尝试过在On change函数中获取No.Of项目..但这不是成功的。当有人增加或减少项目时，我需要计算价格。

我的jQuery

 $(document).ready(function () {
    $("#btnMinus, #btnPlus").click(function (e) {
        alert($("#numberCol").val());
        $("#primaryTotal").val('@item.ItemPrice'+);
        debugger;
    });
});

Answer 1

您需要获得某个价格的价格值，因此我设置了一个data-price并添加了一对跨度以使其更易于格式化。 您在一个元素的ID上有错字，所以我解决了这个问题。 我还添加了一个表格/正文，以便于测试样品。 如果您在表格中有很多此类内容，则无需使用ID，而应使用相对于点击次数的类。 我还解决了“计数”问题，例如可以输入1.67并将其四舍五入为整数。

我以Math.round()方式添加了超级简单的验证。 请注意我如何使用视图模型来设置价格-但为此示例设置了默认值，请在使用前将其删除。

不要依赖于此作为实际值，它很容易破解免费的东西，所以在服务器端也是如此。

 function calculateValues(e) { console.log("recalc"); let item = $('#numberCol'); let itemCount = Math.round(item.val()); item.val(itemCount); let total = $("#primaryTotal"); let price = total.find(".price"); let priceValue = price.data("price") * 1; let totalValue = priceValue * itemCount; price.text(totalValue.toFixed(2)); // console.log("recalc val", priceValue, itemCount, totalValue); } $(function() { //setup a fake value remove for real code $("#primaryTotal").find(".price").data("price", 123.45); $("#btnMinus").add("#btnPlus").on('click', function(e) { //console.log('plus minus', this.id); let num = $('#numberCol'); let numValue = Math.round(num.val()) * 1; if (numValue < num.attr("min")) { numValue = num.attr("min") * 1; num.val(Math.round(numValue)); } if (numValue > num.attr("max")) { numValue = num.attr("max") * 1; num.val(Math.round(numValue)); } if (this.id === "btnMinus") { numValue--; } else { numValue++; } num.val(numValue).trigger('change'); // console.log('plus minus val', numValue); //calculateValues(e); }); $("#numberCol").on('change', calculateValues); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="mytable"> <tbody> <td class="cart-qty nostretch text-center"> <div class="spinner" data-addclass-on-smdown="spinner-sm"> <button type="button" class="btn btn-icon rounded-circle" id="btnMinus"><i data-feather="minus"></i>-</button> <input type="number" class="form-control" value="1" min="1" max="999" id="numberCol" /> <button type="button" class="btn btn-icon rounded-circle" id="btnPlus"><i data-feather="plus"></i>+</button> </div> </td> <td class="cart-price text-right"> <span class="roboto-condensed bold" id="primaryTotal"><span>Rs:</span><span class="price" data-price="@item.ItemPrice">@item.ItemPrice</span> </td> </tbody> </table>