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

此代码将动态生效。即使您添加或删除项目，它也应该有效。

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

检查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

我已将{$'移到.total_price范围

之外

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

JavaScript计算商品的总价

4 个答案: