Question

我想在JS部分中获取cart，以获取价格的总摘要。

$("#ui_pay").hide()
var cart = []
$(".addToCart").click(function(e) {
  cart.push($(this).attr("value"));
  $(this).html("<i class='fas fa-shopping-cart'></i> " + "Lade till ".concat($(this).val()))
  console.log(cart);
})
$(".continue").click(function(e) {
  if (cart === undefined || cart.length == 0) {
    $(this).html('<i class="fas fa-times"></i> ' + "Du måste lägga till något i korgen")
    $(this).css({
      "width": "200px"
    })
  } else {
    $("#ui").fadeOut()
    $('#ui_pay').fadeIn()
    $(".pricePay").html(cart)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="color: white;">Melee</span>
<a href="#bat" rel="modal:open"><img price="1000" value="? Basebollträ" class="melee" src="https://vignette.wikia.nocookie.net/gtawiki/images/5/59/BaseballBat-GTAV.png/revision/latest?cb=20160612221707" alt=""></a>
<button price="1000" value="Basebollträ" class="addToCart"><i class="fas fa-shopping-cart"></i></button>
<a href="#apPistol" rel="modal:open"><img price="25000" value="" class="melee switchblade" src="https://vignette.wikia.nocookie.net/gtawiki/images/f/fc/Switchblade-GTAV.png/revision/latest?cb=20161021210105" alt=""></a>
<button price="15000" value="Switchblade" class="addToCart"><i class="fas fa-shopping-cart"></i></button>

Answer 1

您需要将价格而不是商品名称放入cart中。我已经将其更改为包含两者的对象数组。

您不应像price那样构成自己的属性。请改用data-price。

然后，您需要一个循环，将购物车中的所有价格加起来。

$("#ui_pay").hide()
var cart = []
$(".addToCart").click(function(e) {
  cart.push({item: $(this).val(), price: $(this).data("price")});
  $(this).html("<i class='fas fa-shopping-cart'></i> " + "Lade till ".concat($(this).val()))
  console.log(cart);
})
$(".continue").click(function(e) {
  if (cart === undefined || cart.length == 0) {
    $(this).html('<i class="fas fa-times"></i> ' + "Du måste lägga till något i korgen")
    $(this).css({
      "width": "200px"
    })
  } else {
    $("#ui").fadeOut()
    $('#ui_pay').fadeIn()
    var total_price = 0;
    cart.forEach(({price}) => total_price += price);
    $(".pricePay").html(total_price)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="color: white;">Melee</span>
<a href="#bat" rel="modal:open"><img price="1000" value="? Basebollträ" class="melee" src="https://vignette.wikia.nocookie.net/gtawiki/images/5/59/BaseballBat-GTAV.png/revision/latest?cb=20160612221707" alt=""></a>
<button data-price="1000" value="Basebollträ" class="addToCart"><i class="fas fa-shopping-cart"></i></button>
<a href="#apPistol" rel="modal:open"><img price="25000" value="" class="melee switchblade" src="https://vignette.wikia.nocookie.net/gtawiki/images/f/fc/Switchblade-GTAV.png/revision/latest?cb=20161021210105" alt=""></a>
<button data-price="15000" value="Switchblade" class="addToCart"><i class="fas fa-shopping-cart"></i></button>
<br>
<button class="continue">Show total</button>
<div id="ui_pay">
Total price: <span class="pricePay"></span>
</div>

如何获得“价格”属性的总“价格”？

1 个答案: