根據其他2個div上的文本動態更改一個div中的文本

Question

我有三個div。數量，價格和成本。成本只是價格*數量的乘積。

<div class="qty">1</div> 
<div class="price">49</div> 
<div class="cost"><div> 

<div class="add">ADD</div> 

然後我有一個添加按鈕，它增加了數量值。

jQuery的

$('.add').on('click',function(){ 
     $('.qty').text(parseInt($('.qty').text()) + 1); 
}); 

現在我希望把 「成本」 的div文本是數量*價格。這應該隨着數量的變化而動態變化。這應該怎麼做？

Answer 1

如果改變qty的唯一途徑是按add那麼它是微不足道把成本更新變化的代碼有：

$('.add').on('click',function(){ 
    var qty = parseInt($('.qty').text()) + 1, 
     price = parseInt($('.price').text()); 
    $('.qty').text(qty); 
    $('.cost').text(qty * price); 
}); 

如果您計劃添加remove按鈕，然後你應該創建一個單獨的更新功能：

$('.add').on('click',function(){ 
    $('.qty').text(parseInt($('.qty').text()) + 1); 
    update_cost(); 
}); 
$('.remove').on('click',function(){ 
    $('.qty').text(parseInt($('.qty').text()) - 1); 
    update_cost(); 
}); 

var update_cost = function() { 
    var qty = parseInt($('.qty').text()), 
     price = parseInt($('.price').text()); 
    $('.cost').text(qty * price); 
} 

Answer 2

$('.add').on('click',function(){ 
     $('.qty').text(parseInt($('.qty').text()) + 1); 
     $('.cost').text(parseInt($('.qty').text()) * parseInt($('.price').text()); 
});