🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

5回答

1747閲覧

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

nyoro

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/01/07 05:35

編集2020/01/07 06:29

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

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

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

js

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

投稿2020/01/07 05:41

編集2020/01/07 05:46
m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nyoro

2020/01/07 06:18

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

0

ベストアンサー

こんにちは、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 === 0true
  • num % 7 === 0true

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

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

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

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

投稿2020/01/07 13:36

gentamura

総合スコア406

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nyoro

2020/01/08 02:14

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

0

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

js

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

投稿2020/01/07 08:42

kei344

総合スコア69596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

  • 3の倍数なら.red
  • 7の倍数なら.blue

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

投稿2020/01/07 05:49

yambejp

総合スコア116690

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/01/07 05:55 編集

ちょっと主旨がちがうかもしれませんが・・・; <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

2020/01/07 06:19

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

0

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

投稿2020/01/07 07:33

H40831

総合スコア975

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/01/08 01:19

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

2020/01/08 09:56

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問