@AS-Bposted at 2022-11-07

数値によって、CSSで背景の色を変えたいです。

Q&A

Closed

解決したいこと

wordpress内で数値によって背景の色を変えたいです。
以下のコードで、
10→赤
100→黄
1000→緑
にしたいのですが、全て緑になってしまいます。

該当するソースコード

<div class="test">10</div>
<div class="test">100</div>
<div class="test">1000</div>

<script>
jQuery(function(){
jQuery('.test').each(function(index, element){
Number(element);

if (element < 100) {
jQuery(this).css({
  'background-color': 'red',
  'color': 'black'});

}else if (element < 200) {
jQuery(this).css({
  'background-color': 'yellow',
  'color': 'black'});

}else {
jQuery(this).css({
  'background-color': 'green',
  'color': 'black'});
}
});
});
</script>

自分で試したこと

.eachについてよくわかっていないのですが、class="test"のそれぞれで処理させたいと考えています。
しかし、

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>

とすると全て黄色になるので、値が
101001000（＝緑）
や
123（＝黄）
になっているのでしょうか？

初心者で拙い説明で申し訳ありませんが何卒よろしくお願い申し上げます。

3Answer

@YottyPG posted at 2022-11-07

要素のテキスト(数値)と比較できておらず、色付けがうまくいっていないです。
以下のような形にすれば、期待通りの動きになると思います。

See the Pen Untitled by yotty (@yotty) on CodePen.

また余談ですが、console.logを使って変数の値をログ出力したり、デベロッパーツールなどでブレークポイントを置いて処理を止めて変数の中身を直接確認したりすることで原因の特定をスムーズに行えると思います。

2Like

Comments

@AS-B
Questioner
ご回答いただきありがとうございます。
var num = Number(element.innerText);の設定に感動しました。
innerTextという物を存じ上げませんでしたので、これがどういう動きになるか勉強したいと思います。
また、ログ出力についてもやりたいと思いながら、なんというワードで調べて良いかもわからない状態でしたので有難いです。
とても助かりました。ありがとうございました。

@a9ir posted at 2022-11-07

if (element < 100) {

上記、elementにはdiv内の数値のみではなく、div全体が入っていますので比較が上手くいっていません。
elementに対してtextContentプロパティやinnerTextプロパティで数値部分を取り出して比較する必要があります。

ちなみに分岐条件が多い場合、ifでひとつひとつ書くのは個人的に好きではないので、私ならこんな感じにしたいです。

test.html

<div class="test">text</div>
<div class="test">0</div>
<div class="test">10</div>
<div class="test">100</div>
<div class="test">200</div>
<div class="test">1000</div>

<script>
const styles = {
  '0': {
    backgroundColor: 'red',
    color: 'white',
  },
  '100': {
    backgroundColor: 'yellow',
    color: 'black',
  },
  '200': {
    backgroundColor: 'green',
    color: 'white',
  },
};

document.querySelectorAll('.test').forEach(elem => {
  const num = +elem.textContent;
  if(isNaN(num)) return;
  const s = styles[Math.max(...Object.keys(styles).filter(v => num >= +v))];
  Object.assign(elem.style, s);
});
</script>

2Like

Comments

@AS-B
Questioner
ご回答いただきありがとうございます。
やはりdiv全体になってしまっているのですね。
本投稿のコードを学ぶうちに、ご教授いただいたコードのように条件を別で設定してあるものも見かけましたが、私にはまだレベルが高いと思い諦めておりました。
まだ今は読めませんが、せっかくですので1文ずつ調べて勉強させていただきます。
ありがとうございました。

This answer has been deleted for violation of our Terms of Service.

Are you sure you want to delete the question?

数値によって、CSSで背景の色を変えたいです。

解決したいこと

該当するソースコード

自分で試したこと

3Answer

Comments

Comments

Your answer might help someone💌