1

以下のような予算(class="budget")を費用(class="cost")が上回った場合に判定結果(class="result")に「予算オーバー」と表示したいですが上手くいきません。
ご教授のほどよろしくお願いいたします。

▼HTML

<div>
    <div><span class="budget">100</span> <span class="cost">80</span> <span class="result"></span></div>
    <div><span class="budget">50</span> <span class="cost">70</span> <span class="result"></span></div>
    <div><span class="budget">30</span> <span class="cost">50</span> <span class="result"></span></div>
</div>

▼試したコード

<script>
var budget = $('.budget').text();
var cost = $('.cost').text();
if(budget < cost) {
  $('.result').text('予算オーバー');
}
</script>

▼理想の結果

100 80 
50 70 予算オーバー
30 50 予算オーバー

▼現状の結果

100 80 予算オーバー
50 70 予算オーバー
30 50 予算オーバー

1 件の回答 1

0

要素は複数あるので、配列に格納して同じインデックスで比較します。

  <script>
    const budget = $('.budget').map((_, e) => Number(e.innerText)).get();
    const cost = $('.cost').map((_, e) => Number(e.innerText)).get();
    $('.result').each((i, e) => {
        if (budget[i] < cost[i]) {
            e.innerText = '予算オーバー';
        }
    });
  </script>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。