如何获取属性"Price"的总"Price"？

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>