回答編集履歴

7

テキスト修正

2016/10/04 14:04

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -206,6 +206,6 @@
206
206
 
207
207
  ```
208
208
 
209
- 上記のJSですと、このUIを実現するため、という目的に限れば、input の data-target属性
209
+ 上記のJSですと、**このUIを実現するため、という目的に限れば**、input の data-target属性
210
-
210
+
211
- および、data-group属性は無くても意図通りのUIになります。
211
+ および、data-group属性は無くても意図通りのUIになります。

6

テキスト修正

2016/10/04 14:04

投稿

jun68ykt
jun68ykt

スコア9058

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

5

テキスト追加

2016/10/04 13:47

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -205,3 +205,7 @@
205
205
  </script>
206
206
 
207
207
  ```
208
+
209
+ 上記のJSですと、(このUIを実現するため、という目的に限れば、)input の data-target属性
210
+
211
+ および、data-group属性は不要ということになります。

4

追記

2016/10/04 13:38

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -175,3 +175,33 @@
175
175
  でOKです。
176
176
 
177
177
 
178
+
179
+ ---
180
+
181
+ 追記2
182
+
183
+
184
+
185
+ divでkeyup拾う版でも、filter使って無駄なコード省いたら以下になりました。
186
+
187
+ (こちらは、HTMLは質問のままでOKです。)
188
+
189
+ ```
190
+
191
+ <script>
192
+
193
+ $(function(){
194
+
195
+ $('div[id^="g"]').on('keyup', function(){
196
+
197
+ $('#icon' + $(this).attr('id').substring(1) ).toggleClass("selected",
198
+
199
+ $("input", $(this)).filter(function(){return this.value;}).length > 0);
200
+
201
+ });
202
+
203
+ });
204
+
205
+ </script>
206
+
207
+ ```

3

テキスト追加

2016/10/04 13:24

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -142,4 +142,36 @@
142
142
 
143
143
 
144
144
 
145
+
146
+
145
147
  以上、参考になれば幸いです。
148
+
149
+
150
+
151
+ ---
152
+
153
+ 追記
154
+
155
+ ```
156
+
157
+ if( flag )
158
+
159
+ $($(this).attr('data-target')).addClass("selected");
160
+
161
+ else
162
+
163
+ $($(this).attr('data-target')).removeClass("selected");
164
+
165
+ ```
166
+
167
+ は冗長でした。元のとおり、
168
+
169
+ ```
170
+
171
+ $($(this).attr('data-target')).toggleClass("selected", flag);
172
+
173
+ ```
174
+
175
+ でOKです。
176
+
177
+

2

テキスト修正

2016/10/04 10:56

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -134,11 +134,11 @@
134
134
 
135
135
 
136
136
 
137
- それと、元のコードで、```<div id="#icon1">#icon1</div>```の```#icon1```の ```#```
137
+ それと、元のコードで、```<div id="#icon1">#icon1</div>```の```id="#icon1"```のほうの ```#```
138
138
 
139
- は不要と思われますので、単にこの不要な```#```を除去れば元のJSでも期待通りに動く
139
+ は不要と思われます。私作成した上記のHTMLは取っていま。(2カ所)
140
140
 
141
- かもしれません。
141
+ ですので、単にこの不要な```#```を除去すれば元のJSでも期待通りに動くかもしれません。
142
142
 
143
143
 
144
144
 

1

テキスト追加

2016/10/04 10:48

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -1,6 +1,10 @@
1
+ 質問にあるJSとHTMLをつなげて、以下を作成しました。
2
+
1
3
  ベタな解法かもしれませんが、一応それらしく動きます。
2
4
 
3
5
  (デバッグログもそのまま入れておきます)
6
+
7
+
4
8
 
5
9
  ```HTML
6
10