JavaScript计算商品总价

Question

请帮我键入选定商品的总价。这是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");
        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 2

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 3

此代码将动态工作。即使您添加或删除项，它也应该工作。

​

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>

​