jQueryのクラスの追加/削除のスマートな書き方を探しています

Question

inputに文字を入力して、結果欄に3の倍数なら赤色で表示、7の倍数なら青色で表示、3かつ7の倍数なら紫で出力するという処理をjQueryで書いています。
結果自力で実装できたのですが、書き方がかなり強引だと感じたので、もっとスマートな方法はないかと思い、質問させて頂きました。

<input type="text" class="inputArea">
<button type="text" class="changeButton">change!!</button>
<p class="count-result">◆結果◆</p>

.count-color{
  &-red{
    color: red;
  }
  
  &-blue{
    color: blue;
  }
  
  &-purple{
    color: purple;
  }

  &-black{
    color: black;
  }
}

 $('.changeButton').click(function() {
   var num = $('.inputArea').val();
   var result = $('.count-result')
   result.text("◆" + num + "◆");
        
        if (num % 3 === 0 && num % 7 === 0) {
          result.addClass('count-color-purple');
          result.removeClass('count-color-red');
          result.removeClass('count-color-blue');
          result.removeClass('count-color-black');
        } else if (num % 3 === 0) {
          result.addClass('count-color-red');
          result.removeClass('count-color-purple');
          result.removeClass('count-color-blue');
          result.removeClass('count-color-black');
        } else if (num % 7 === 0) {
          result.addClass('count-color-blue');
          result.removeClass('count-color-red');
          result.removeClass('count-color-purple');
          result.removeClass('count-color-black');
        } else {
          result.addClass('count-color-black');
          result.removeClass('count-color-red');
          result.removeClass('count-color-purple');
          result.removeClass('count-color-blue');
        }
        
//これをやると全てのクラスが消えて動かなくなる
//result.removeClass();
});

###強引だと感じる点
・if文の中で、一度クラスを付与したあとに、それぞれremoveClassで不要なクラスを外している書き方が明らかに冗長なので直したいです。click関数を実行したら、その関数内でremoveClassを実行すれば上手くいくと思ったのですが、全てのクラスが消えてしまうのでDOM操作自体ができなくなってしまいます。

・全ての条件に合致しない場合当然色の変化はないのですが、inputに3→1のように順に入力すると、赤のクラスが付与されたままなので３の倍数ではないのに赤色になってしまうという現象が起きます。それを回避する為、わざわざCSSに黒色のクラスを書いて指定するようにしているのですが、この書き方もあまり良いように思えないので、何か別の方法はないでしょうか。

###追記
皆さん回答ありがとうございます！
すみません！一点だけ不具合を見つけたのですが、input欄に何も入力されていない状態でボタンをクリックすると、中身が空のまま表示されて、色が紫になってしまいます。
inputが空欄の場合、「◆結果◆」の文字列と色は何も変化させたくないので、下記のように記述を変更しました。

if (num.length) {
   result.text("◆" + num + "◆");
}

とりあえず文字列の変更は止められたのですが、色が紫に変わってしまうのが直せませんでした。
下記のように3かつ7で割ったときに0になる場合のみクラスを付与するように書いているのですが、何故紫色になってしまうのでしょうか。

num % 3 === 0 && num % 7 === 0

Answer 1

分岐入る前に全てremoveして分岐ではaddのみ書くようにしては。

あとメソッドチェーン使えば何回もresult書かなくても良くなりそうです。

result.removeClass("a").removeClass("b").removeClass("c").removeClass("d");

Comments

[nyoro]

ありがとうございます！分岐に入る前にremoveClassを指定したら黒色用のクラスも必要なくif文の中も簡潔に書くことができました！

[kei344]

To: m.ts10806さん
.removeClass( 'a b c d' ) みたいに書けると思います。

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

Answer 2

こんにちは、nyoroさん

質問拝見しました。スマートな書き方を知りたいとのことですね。

プログラミング全般で言えると思いますが、必要な機能を必要な単位で、わかりやすい命名で切り分けることが必要だと思います。
JavaScriptの場合は、関数単位で分けることが多いので、スタイルシートのクラス名処理を以下のように実装してみました。

    $('.changeButton').click(function() {
      var num = $('.inputArea').val();
      var $result = $('.count-result')
      $result.text("◆" + num + "◆");

      resetColorClassName($result);
      $result.addClass(getColorClassName(num));
    });

    function getColorClassName(num) {
      console.log('num', num);
      console.log('num.length', num.length);
      console.log('num % 3 === 0', num % 3 === 0);
      console.log('num % 7 === 0', num % 7 === 0);

      var color = 'count-color-';

      if (num.length) {
        if (num % 3 === 0 && num % 7 === 0) {
          color = 'purple';
        } else if (num % 3 === 0) {
          color = 'red';
        } else if (num % 7 === 0) {
          color = 'blue';
        } else {
          color = 'black';
        }
      } else {
        color = null;
      }

      return color;
    }

    function resetColorClassName($target) {
      [
        'count-color-red',
        'count-color-blue',
        'count-color-purple',
        'count-color-black'
      ].forEach(function(className) {
        $target.removeClass(className);
      });
    }

ここでは、

• クラス名を取得する
• クラス名を削除する

をそれぞれ関数に切り出しました。

補足として、私がjQueryを書く際は、

• jQueryオブジェクトを変数に格納する場合は、$変数名のように、変数名の先頭に$をつけて明示的にする

ことが多いです。

また、inputが空欄でなぜ紫色になってしまうか。についてですが、console.logでの結果を見ていただくと、

• num % 3 === 0 が true
• num % 7 === 0 が true

となるため、結果 、num % 3 === 0 && num % 7 === 0 が true となるためです。

これは「空欄を割ったあまりを求める」ということは、「空欄を0で計算すればよいですね。」というJavaScriptのコンパイラが気を利かせた結果、0を3または7で割ったあまりは0という計算をしているためです。
そのため厳密には、入力されている値が求める数値かどうかという判定（validation）が必要になります。

nyoroさんが実装された num.length の他にも方法はあるので、少し考えてみると良いかもしれません。

以上、参考になれば幸いです。

Comments

[nyoro]

回答ありがとうございます！空欄が0と認識されてnum % 3 === 0 && num % 7 === 0 が trueなるので、さらにif文で分岐させれば良いのですね！初歩的なことだと思いますが、consoleで戻り値がtrueになっているか確認する作業も勉強になりました！今後利用していこうと思います。

Answer 3

特にスマートでもないが、書いてみた。

var colors = [ 'black', 'purple', 'red', 'blue' ].map( c => 'count-color-' + c );
var result = $( '.count-result' );
$( '.changeButton' ).click( function() {
	var num = parseInt( $( '.inputArea' ).val(), 10 );
	var index = ( Number.isNaN( num ) || num === 0 ) ? 0 : [ 21, 3, 7 ].reduce( ( pre, cur, i )=> ( pre === 0 && num % cur === 0 ? i + 1 : pre ), 0 );
	result.addClass( colors[ index ] ).removeClass( colors.filter( c => c != colors[ index ] ).join( ' ' ) ).text( ( num > 0 ) ? '◆' + num + '◆' : '' );
} );
```**動くサンプル：**[https://jsfiddle.net/qo5dhtv8/](https://jsfiddle.net/qo5dhtv8/)

Answer 4

• ３の倍数なら.red
• ７の倍数なら.blue

としておき、21の倍数に.red.blueとなるので
cssで.red.blueに対してcolor: purpleを設定しておけばいいのでは？

Comments

[yambejp]

ちょっと主旨がちがうかもしれませんが・・・；
<style>
.red{color:red}
.blue{color:blue}
.red.blue{color:purple}

</style>
<script>
$(function(){
$('.inputArea').on('input',function(){
var v=parseInt($(this).val());
$(this).toggleClass('red',v%3==0);
$(this).toggleClass('blue',v%7==0);
}).trigger('input');
});
</script>
<input type="text" class="inputArea" value="3"><br>
<input type="text" class="inputArea" value="7"><br>
<input type="text" class="inputArea" value="21"><br>

[nyoro]

ありがとうございます！確かに2つのクラスが付いた際に紫色を付与する方法も有りですね！別パターンも試しに作ってみようと思います！

Answer 5

if文ではなくswitch文を使ってみては？

Comments

[miyabi_pudding]

switchのcaseに条件式を入れるのは、賛否両論あるみたいですね・・・。
http://tacosvilledge.hatenablog.com/entry/2017/01/17/143009

理由としてはおそらくですが、
case自体があくまで、値対値に対して比較しているのであって、
caseに論理値を入れるのはそもそもswitchの用法ではない、ということなのかなと思います。
また、公式ドキュメントを見る限りでは、caseに論理値を入れる用法は見当たらない、ということから、
（ひとまずMDNではその用法の記載はありません。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch）
邪道、という考えもあるのかと思います。

[H40831]

たしかに、考えてみたら
case に指定するものはもともと比較式ではなく、想定される値そのものですもんね…