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

现在我想在“cost”div中添加一个文本，这是一个qty * price。这应该随着数量的变化而动态变化。应该怎么做？

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

根据其他2个div上的文本动态更改一个div中的文本

2 个答案: