jQuetyでクラスの数値計算をリアルタイムに行いたい

Question

現在はクラスAをクリックするとクラスBの数値が合算されるようになっているのですが、クリックではなくクラスBの数値が変動したらリアルタイムに合算されるようにするにはどのようにしたら良いのでしょうか？

<button class="A" type="button">計算</button>

<button class="B" type="button">1</button>
<button class="B" type="button">2</button>
<button class="B" type="button">3</button>
...～

$('.A').click(function() {
		let sum = 0;
		$('.B').each(function() {
			sum += Number(this.innerHTML);
		});
		this.innerHTML = sum;
	});	

  $(function() {
    $('.B').on({
      'click': function() {
          $(this).text(parseInt($(this).text())+1);
      }
    });
  });

Comments

[kei344]

HTMLも提示してください。

[popepe]

忘れてましたすみません。

[kei344]

「クラスBの数値が変動」とはどういう挙動でしょうか。ほかのスクリプトによる書き換えでしょうか。

[popepe]

はい。他のスクリプトによる書き換えです。
クラスBはクリックすると数値が+1ずつ加算されていくようになってます。

[kei344]

ではそのコードも提示してください。

[popepe]

載せました。お願いします。

Answer 1

他のスクリプトによる書き換えです。

クラスBはクリックすると数値が+1ずつ加算されていくようになってます。

「他のスクリプト」が書きかえれるならそこで処理したほうが早いです。

$(function() {
    $('.A').on('click', function() {
        let sum = 0;
        $('.B').each(function() {
            sum += Number(this.innerHTML);
        });
        this.innerHTML = sum;
    });
    $('.B').on('click', function() {
        $(this).text(parseInt($(this).text()) + 1);
        $('.A').trigger('click');
    });
});

【.trigger() | jQuery API Documentation】
https://api.jquery.com/trigger/

---

「他のスクリプト」が書きかえれないなら MutationObserver とか使えば検知できるとは思います。

【MutationObserver - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

【JavaScriptのMutationObserverでDOMの変化を監視する方法 - Qiita】
https://qiita.com/munieru_jp/items/a6f1433652124a2165e4

【使ってみよう！MutationObserver！ - Qiita】
https://qiita.com/ryo_hisano/items/9f15ae87d691d497bc17

【Observerを使って要素を監視してみよう！ | フロントエンドBlog | ミツエーリンクス】
https://www.mitsue.co.jp/knowledge/blog/frontend/201803/28_1056.html

Comments

[popepe]

返信遅れてすみません。
教えてくださった方法で意図通りに動きました。
ありがとうございました。

Answer 2

MutationObserverのサンプルです

• codepen

Comments

[popepe]

こちらの方法も参考にしたいと思います。
ありがとうございました。