Как я могу получить общую «Цена» атрибута «Цена»?

Question

Я хочу получить cart в части JS, чтобы получить общую сумму цены.

$("#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.

Затем вам понадобится al oop, который суммирует все цены в корзине.

$("#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>