JavaScript计算商品的总价

Question

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

Answer 1

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);
});

JSFiddle

Answer 2

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> 

Answer 3

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+'$');
       } 
     });
   } 

Answer 4

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

JSFiddle