inputに文字を入力して、結果欄に3の倍数なら赤色で表示、7の倍数なら青色で表示、3かつ7の倍数なら紫で出力するという処理をjQueryで書いています。
結果自力で実装できたのですが、書き方がかなり強引だと感じたので、もっとスマートな方法はないかと思い、質問させて頂きました。
html
1<input type="text" class="inputArea"> 2<button type="text" class="changeButton">change!!</button> 3<p class="count-result">◆結果◆</p>
scss
1.count-color{ 2 &-red{ 3 color: red; 4 } 5 6 &-blue{ 7 color: blue; 8 } 9 10 &-purple{ 11 color: purple; 12 } 13 14 &-black{ 15 color: black; 16 } 17}
js
1 $('.changeButton').click(function() { 2 var num = $('.inputArea').val(); 3 var result = $('.count-result') 4 result.text("◆" + num + "◆"); 5 6 if (num % 3 === 0 && num % 7 === 0) { 7 result.addClass('count-color-purple'); 8 result.removeClass('count-color-red'); 9 result.removeClass('count-color-blue'); 10 result.removeClass('count-color-black'); 11 } else if (num % 3 === 0) { 12 result.addClass('count-color-red'); 13 result.removeClass('count-color-purple'); 14 result.removeClass('count-color-blue'); 15 result.removeClass('count-color-black'); 16 } else if (num % 7 === 0) { 17 result.addClass('count-color-blue'); 18 result.removeClass('count-color-red'); 19 result.removeClass('count-color-purple'); 20 result.removeClass('count-color-black'); 21 } else { 22 result.addClass('count-color-black'); 23 result.removeClass('count-color-red'); 24 result.removeClass('count-color-purple'); 25 result.removeClass('count-color-blue'); 26 } 27 28//これをやると全てのクラスが消えて動かなくなる 29//result.removeClass(); 30});
###強引だと感じる点
・if文の中で、一度クラスを付与したあとに、それぞれremoveClassで不要なクラスを外している書き方が明らかに冗長なので直したいです。click関数を実行したら、その関数内でremoveClassを実行すれば上手くいくと思ったのですが、全てのクラスが消えてしまうのでDOM操作自体ができなくなってしまいます。
・全ての条件に合致しない場合当然色の変化はないのですが、inputに3→1のように順に入力すると、赤のクラスが付与されたままなので3の倍数ではないのに赤色になってしまうという現象が起きます。それを回避する為、わざわざCSSに黒色のクラスを書いて指定するようにしているのですが、この書き方もあまり良いように思えないので、何か別の方法はないでしょうか。
###追記
皆さん回答ありがとうございます!
すみません!一点だけ不具合を見つけたのですが、input欄に何も入力されていない状態でボタンをクリックすると、中身が空のまま表示されて、色が紫になってしまいます。
inputが空欄の場合、「◆結果◆」の文字列と色は何も変化させたくないので、下記のように記述を変更しました。
js
1if (num.length) { 2 result.text("◆" + num + "◆"); 3} 4
とりあえず文字列の変更は止められたのですが、色が紫に変わってしまうのが直せませんでした。
下記のように3かつ7で割ったときに0になる場合のみクラスを付与するように書いているのですが、何故紫色になってしまうのでしょうか。
js
1num % 3 === 0 && num % 7 === 0
回答5件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/07 06:18
2020/01/07 08:45