Please help me to type the total price of selected items. Here is JSFiddle
<section id="items">
<div class="item">Monitor <span class="price">100$</span></div>
<div class="item">Mouse <span class="price">20$</span></div>
<div class="item">Keyboard <span class="price">60$</span></div>
</section>
<section id="basket">
<p>Total price:<span class="total_price"></span></p>
</section>`
var total = 0;
$("#items").on('click', ".item", function() {
$(this).appendTo("#basket");
total += parseInt($(this).children().text(), 10);
$('.total_price').text(total);
});
$("#basket").on('click', ".item", function() {
$(this).appendTo("#items");
total -= parseInt($(this).children().text(), 10);
$('.total_price').text(total);
});
This code will work dynamically. Even if you add or remove items, it should work.
var priceList = $('#items').find('.price'); var totalPrice = 0; $.each(priceList, function(i, price){ totalPrice += parseInt($(price).text()) }); $('.total_price').text(totalPrice);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section id="items"> <div class="item">Monitor <span class="price">100$</span></div> <div class="item">Mouse <span class="price">20$</span></div> <div class="item">Keyboard <span class="price">60$</span></div> </section> <section id="basket"> <p>Total price:<span class="total_price"></span></p> </section>
check demo
var total = 0;
$("#items").on('click', ".item", function() {
$(this).appendTo("#basket");
getTotal()
});
$("#basket").on('click', ".item", function() {
$(this).appendTo("#items");
getTotal()
});
function getTotal(){
total = 0;
$("#basket").find('.price').each(function(i){
total += parseInt($(this).text().slice(0,-1));
if(i + 1 === $("#basket").find('.item').length){
$('.total_price').text(total+'$');
}
});
}
I have moved '$' outside of the .total_price
span
$("#items, #basket").on('click', ".item", function(){
$($(this).parent().is('#items')?'#basket':'#items').append(this);
$(".total_price").text(getTotal());
});
function getTotal(){
var t = 0;
$('.price', "#basket").each(function(){
t+=parseInt($(this).text());
});
return t;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.