質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

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

Q&A

解決済

3回答

8441閲覧

複数テキストボックスのどれか一つでも入力されていればクラスを付与

hibikikudo

総合スコア238

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/10/03 02:56

###前提・実現したいこと
同一グループ内の複数のテキストボックスのどれか一つでも入力されていればselectedクラスを付与、そうでなければクラス除去。

###発生している問題・エラーメッセージ
下記のコードを試したが、textbox1とtextbox2両方に文字を入力した後、textbox2の入力内容を消去すると、#iconに付与selectedクラスが除去されてしまう。
どちらかが残っていればクラスを残したい。

###該当のソースコード

html

1<input type="text" name="textbox1" group="group1" value="" data-target="#icon"> 2<input type="text" name="textbox2" group="group1" value="" data-target="#icon">

javascript

1$(function () { 2 $('input[type="text"][data-target^="#icon"]') 3 .on('keydown keyup keypress change', function () { 4 var flag = ($(this).val().length > 0) ? "selected" : ""; 5 $($(this).attr('data-target')).attr("class", flag); 6 }); 7});

初歩的な質問で恐縮ですが、よろしくお願いいたします。

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

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

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

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

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

guest

回答3

0

こんにちは!m(_ _)m

Javascript

1$(function () { 2 var input = $('input[type="text"][data-target^="#icon"]') 3 input.on('keydown keyup keypress change', function () { 4 var count = 0; 5 $.each(input,function(i){ 6 if($(input[i]).val().length > 0) { 7 count ++; 8 } 9 }) 10 var flag = (count > 0) ? "selected" : ""; 11 $($(this).attr('data-target')).attr("class", flag); 12 }); 13});

テキストボックスが複数あるので、イベントが発火した時点で両方をeachで回し、それぞれにvalueがあるかチェックしています。

一箇所でも内容が入力されていればcountは1以上になりますので、その結果でclassを付与するか否かを定めています。

投稿2016/10/03 03:22

MaShiRo_H

総合スコア328

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

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

hibikikudo

2016/10/03 03:41

ありがとうございます。こんな風にセレクターを変数化すれば、よりDRYに記述できますよね。見習いたいと思いました。
guest

0

ベストアンサー

javascript

1var flag = ($(this).val().length > 0) ? "selected" : "";

ここでの$(this)は入力しているinputのみにかかっているため、2つのinputを監視できていません。

javascript

1$(function () { 2 $('input[type="text"][data-target^="#icon"]') 3 .on('keydown keyup keypress change', function () { 4 var flag = false; 5 $('input[type="text"][data-target^="#icon"]').each(function() { 6 flag = $(this).val().length > 0; 7 return !flag; 8 }); 9 $($(this).attr('data-target')).toggleClass("selected", flag); 10 }); 11});

に変更してみてください。

余談ですがセレクタは少ないほうが高速動作するので、$('input[type="text"][data-target^="#icon"]')として選択しているものは、別途inputへclassを振ってセレクタでclass指定するといいと思います。

投稿2016/10/03 03:19

ShoheiTai

総合スコア897

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

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

ShoheiTai

2016/10/03 03:28

補足です。イベントに「keydown keyup keypress change」を指定されていますが、特に理由がなければkeyupのみでも良いかと思います。
hibikikudo

2016/10/03 03:44

パフォーマンス向上のためのアドバイスまでいただきありがとうございます! .toggleClassを使った方法が大変参考になりましたので、こちらの回答をBAとさせていただきます。
guest

0

ShoheiTaiさん、MaShiRo_Hさんのアンサーをいいとこ取りして下記コードにて問題解決しました。
本当にありがとうございました。

javascript

1var input = $('input[type="text"][data-target^="#icon"]') 2 input.on('keyup', function () { 3 var flag = false; 4 input.each(function () { 5 flag = $(this).val().length > 0; 6 return !flag; 7 }); 8 $($(this).attr('data-target')).toggleClass("selected", flag); 9 });

投稿2016/10/03 03:48

hibikikudo

総合スコア238

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問