jquery - 根据其他 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 中添加一个文本，即 qty*price。这应该随着数量的变化而动态变化。这个应该怎么做？？

Answer 1

如果更改的唯一方法qty是按add然后 a 将成本更新更改代码放在那里是微不足道的：

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