質問にある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 12:29
2016/10/05 02:44