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

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

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

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

jQuery

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

Q&A

解決済

2回答

2421閲覧

複数グループのそれぞれ複数テキストボックスのどれか一つでも入力されていれば個別にクラスを付与

hibikikudo

総合スコア238

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/10/04 09:56

編集2016/10/04 12:23

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

###発生している問題・エラーメッセージ
下記のコードを試したが、textbox1とtextbox3に文字を入力し#icon1と#icon2にクラスを付与した後、textbox1とtextbox3の入力内容を消去すると、#icon1に付与したselectedクラスが残ってしまいます。

###該当のソースコード
jsfiddleで作ったサンプル

html

1<div id="g1"> 2<input type="text" name="textbox1" value="" data-target="#icon1" data-group="group1"> 3<input type="text" name="textbox2" value="" data-target="#icon1" data-group="group1"> 4</div> 5<div id="g2"> 6<input type="text" name="textbox3" value="" data-target="#icon2" data-group="group2"> 7<input type="text" name="textbox4" value="" data-target="#icon2" data-group="group2"> 8</div> 9<div id="icon1">#icon1</div> 10<div id="icon2">#icon2</div>

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 });

何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

こんな感じでどうでしょう?

javascript

1$(function(){ 2 $('input[type="text"]').on('keyup', function () { 3 var v=""; 4 $('[data-target="'+$(this).attr('data-target')+'"]').each(function(){ 5 v+=$(this).val() 6 }); 7 $($(this).attr('data-target')).toggleClass('selected',v!==""); 8 }); 9}); 10

HTML

1<div id="g1"> 2<input type="text" name="textbox1" value="" data-target="#icon1" data-group="group1"> 3<input type="text" name="textbox2" value="" data-target="#icon1" data-group="group1"> 4</div> 5<div id="g2"> 6<input type="text" name="textbox3" value="" data-target="#icon2" data-group="group2"> 7<input type="text" name="textbox4" value="" data-target="#icon2" data-group="group2"> 8</div> 9<div id="icon1">#icon1</div> 10<div id="icon2">#icon2</div> 11

※id=#icon1→id=icon1で読み替えましたが大丈夫ですか?

追記

val()を走査しなくてもfilterすればよかったですね

javascript

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

投稿2016/10/04 12:26

編集2016/10/04 13:17
yambejp

総合スコア114572

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

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

hibikikudo

2016/10/04 12:29

> ※id=#icon1→id=icon1で読み替えましたが大丈夫ですか? はい。おっしゃる通りです。質問を修正しました。
hibikikudo

2016/10/05 02:44

ありがとうございました。大変参考になりました。BAとさせていただきます。
guest

0

質問にあるJSとHTMLをつなげて、以下を作成しました。
ベタな解法かもしれませんが、一応それらしく動きます。
(デバッグログもそのまま入れておきます)

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>teratail.com/questions/50274</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 7 <script> 8 $(function(){ 9 10 var div = $('div[id^="g"]'); 11 12 div.on('keyup', function () { 13 14 console.log('id=' + $(this).attr('id')); 15 16 var input = $('input', $(this)); 17 18 var flag = false; 19 input.each(function () { 20 21 console.log('id=' + $(this).attr('id')); 22 23 if ( $(this).val().length > 0 ) { 24 flag = true; 25 return; 26 } 27 }); 28 29 console.log('flag=' + flag); 30 console.log('$(this).attr(data-target)=' + $(this).attr('data-target')); 31 32 if( flag ) 33 $($(this).attr('data-target')).addClass("selected"); 34 else 35 $($(this).attr('data-target')).removeClass("selected"); 36 }); 37 }); 38 </script> 39 <style> 40 .selected { 41 color: red; 42 } 43 </style> 44</head> 45<body> 46<div id="g1" data-target="#icon1"> 47 <input id='in_g1_1' type="text" name="textbox1" value="" data-group="group1"> 48 <input id='in_g1_2' type="text" name="textbox2" value="" data-group="group1"> 49</div> 50<div id="g2" data-target="#icon2"> 51 <input id='in_g2_1' type="text" name="textbox3" value="" data-group="group2"> 52 <input id='in_g2_2' type="text" name="textbox4" value="" data-group="group2"> 53 </div> 54<div id="icon1">#icon1</div> 55<div id="icon2">#icon2</div> 56</body> 57</html>

元のコードと違うのは、data-target属性を、input からグループを括るdiv に移動して、
このdivでkeyupを拾うようにしたことです。

input のidもデバッグ用に追加しました。

それと、元のコードで、<div id="#icon1">#icon1</div>id="#icon1"のほうの #
は不要と思われます。私の作成した上記のHTMLでは取っています。(2カ所)
ですので、単にこの不要な#を除去すれば元のJSでも期待通りに動くかもしれません。

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


追記

if( flag ) $($(this).attr('data-target')).addClass("selected"); else $($(this).attr('data-target')).removeClass("selected");

は冗長でした。元のとおり、

$($(this).attr('data-target')).toggleClass("selected", flag);

でOKです。


追記2

divでkeyup拾う版でも、filter使って無駄なコード省いたら以下になりました。
(こちらは、HTMLは質問のままでOKです。)

<script> $(function(){ $('div[id^="g"]').on('keyup', function(){ $('#icon' + $(this).attr('id').substring(1) ).toggleClass("selected", $("input", $(this)).filter(function(){return this.value;}).length > 0); }); }); </script>

上記のJSですと、このUIを実現するため、という目的に限れば、input の data-target属性
(および、data-group属性) は無くても意図通りのUIになります。

投稿2016/10/04 10:44

編集2016/10/04 14:04
jun68ykt

総合スコア9058

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

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

hibikikudo

2016/10/04 12:30

ありがとうございます。 > それと、元のコードで、<div id="#icon1">#icon1</div>のid="#icon1"のほうの # は不要と思われます。 はい。おっしゃる通りです。質問を修正しました。
hibikikudo

2016/10/05 02:46

ありがとうございました。非常に参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問