购物车加减号计算总金额

Question

我有一个购物车，我需要获得Item increse的值（+和-） 并将其添加到商品价格中。

购物车+/-控制

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

<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>