jquery - 他の 2 つの div のテキストに基づいて 1 つの div のテキストを動的に変更する

Question

私は3つの部門を持っています。数量、価格、コスト。コストは、単に価格 * 数量を掛けたものです。

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

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

次に、数量値を増やす追加ボタンがあります。

Jクエリ

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

ここで、qty*price である "cost" 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());
});