teratail
回答率
85.49%
質問するログイン新規登録
トップに関する質問javascriptでifが効かないケース

編集履歴

質問編集履歴

2

誤字

2018/04/23 02:13

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -22,13 +22,11 @@
22
22
 
23
23
  どうしたらelse以下の条件が効くようになるでしょうか？
24
24
 
25
-
26
-
27
- もしできればですが、当該のアラート部分以外はあんまり変えないでほしいです。
28
-
29
- とりあえず、チェックが２個未満のときの条件分岐はどうやったらできるのか？をかいつまんでご教示いただけますと嬉しいです。
25
+ （チェックが２個未満のときの条件分岐はどうやったらできるのか？）
26
+
27
+
28
+
30
-
29
+ ご教示いただけますと嬉しいです。
31
-
32
30
 
33
31
  よろしくお願いいたします。
34
32
 

1

誤字

2018/04/23 02:13

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,16 +1,52 @@
1
+ ifとelseの分岐が効かずにアラートがでません。
2
+
3
+
4
+
5
+ 次のjavascriptは後述の抜粋でして、この部分のアラートがでないのです。
6
+
7
+
8
+
9
+ ```javascript
10
+
1
- 次のjavascript(jQuery)で、なぜか``//チェックが２個未満のとき``のアラートが効きません。
11
+ //チェックが２個未満のときのアラート
12
+
2
-
13
+ }else{
14
+
3
-
15
+ alert('２個未満ですね');
16
+
4
-
17
+ }
18
+
19
+ ```
20
+
21
+
22
+
23
+ どうしたらelse以下の条件が効くようになるでしょうか？
24
+
25
+
26
+
5
- ちょっとコードが長いのでこちらのサンプルをご覧いたがいた方がいいと思いますが、
27
+ もしできればですが、当該のアラート部分以外はあんまり変えないでほしいです。
28
+
6
-
29
+ とりあえず、チェックが２個未満のときの条件分岐はどうやったらできるのか？をかいつまんでご教示いただけますと嬉しいです。
30
+
31
+
32
+
33
+ よろしくお願いいたします。
34
+
35
+
36
+
37
+ ---
38
+
39
+
40
+
41
+
42
+
43
+ ▼動くサンプル
44
+
7
- [https://jsfiddle.net/0vezwk66/](https://jsfiddle.net/0vezwk66/)
45
+ [https://jsfiddle.net/ojr8xrso/](https://jsfiddle.net/ojr8xrso/)
8
-
9
-
10
-
46
+
47
+
48
+
11
- いちおうそのコードは下記です。
49
+ ▼そのコード
12
-
13
-
14
50
 
15
51
  ```html
16
52
 
@@ -22,7 +58,7 @@
22
58
 
23
59
  <label for="fluits_apple" class="check_label">
24
60
 
25
- <span class="i apple oishi"></span>
61
+ <span class="i apple damekamo"></span>
26
62
 
27
63
  </label>
28
64
 
@@ -32,7 +68,7 @@
32
68
 
33
69
  <label for="fluits_grape" class="check_label">
34
70
 
35
- <span class="i grape oishi"></span>
71
+ <span class="i grape damekamo"></span>
36
72
 
37
73
  </label>
38
74
 
@@ -42,7 +78,7 @@
42
78
 
43
79
  <label for="fluits_banana" class="check_label">
44
80
 
45
- <span class="i banana mazui"></span>
81
+ <span class="i banana daijobu"></span>
46
82
 
47
83
  </label>
48
84
 
@@ -52,7 +88,7 @@
52
88
 
53
89
  <label for="fluits_kiwi" class="check_label">
54
90
 
55
- <span class="i kiwi mazui"></span>
91
+ <span class="i kiwi daijobu"></span>
56
92
 
57
93
  </label>
58
94
 
@@ -98,6 +134,8 @@
98
134
 
99
135
 
100
136
 
137
+
138
+
101
139
  ```
102
140
 
103
141
  ```javascript
@@ -106,7 +144,7 @@
106
144
 
107
145
 
108
146
 
109
- ////チェックしたらピンクに画像をコピーする
147
+ ////チェックしたらピンクに画像をコピー
110
148
 
111
149
  $('input[name=check_fluits]').change(function(){
112
150
 
@@ -116,7 +154,7 @@
116
154
 
117
155
  $(this).prop("checked",false);
118
156
 
119
- alert('もうダメ！');
157
+ alert('チェックは２個までです');
120
158
 
121
159
  return false;
122
160
 
@@ -134,8 +172,6 @@
134
172
 
135
173
  console.log($.map(clone.prop('classList'),function(x){return "."+x;}).join(""));
136
174
 
137
- //console.log(clone.prop('classList').map(function(){return "."+$(this);}));
138
-
139
175
  $('#output1,#output2').has($.map(clone.prop('classList'),function(x){return "."+x;}).join("")).html("");
140
176
 
141
177
  }
@@ -146,27 +182,25 @@
146
182
 
147
183
 
148
184
 
149
-
150
-
151
- ////チェックしたらアラート
185
+ ////チェックしたらアラート
152
-
186
+
153
- $('input[name=check_fluits]').change(function(){
187
+ $('input[name=check_fluits]').change(function(){
154
-
155
-
156
-
188
+
189
+
190
+
157
- //ピンクの画像を水色にコピー
191
+ //ピンクの画像を水色にコピー
158
-
192
+
159
- var cmc_unit1 = $('#output1').html();
193
+ var cmc_unit1 = $('#output1').html();
160
-
194
+
161
- $('#outputA').html(cmc_unit1);
195
+ $('#outputA').html(cmc_unit1);
162
-
196
+
163
- var cmc_unit2 = $('#output2').html();
197
+ var cmc_unit2 = $('#output2').html();
164
-
198
+
165
- $('#outputB').html(cmc_unit2);
199
+ $('#outputB').html(cmc_unit2);
166
200
 
167
201
 
168
202
 
169
- //チェックしたらアラート
203
+ //「.i」の次のクラス（.appleとか）を取り出して代入（アラートで使うため）
170
204
 
171
205
  var pair1 = $('#output1 .i').get(0).className.split(" ")[1];
172
206
 
@@ -174,33 +208,47 @@
174
208
 
175
209
 
176
210
 
177
- //チェックが２個のとき
211
+ //チェックが２個のときのアラート
178
-
212
+
179
- if($('#fluits_list :checked').length == 2){
213
+ if($('#fluits_list :checked').length == 2){
180
-
214
+
181
- var result = $('#now_' + pair1).text();
215
+ var result = $('#now_' + pair1).text();
216
+
217
+
218
+
182
-
219
+ //１個目にチェックしたやつが「.damekamo」を持ってたら、HTMLにある「それを最初にチェックしたらダメです」をアラート
220
+
183
- if (($('#output1').find('.i').hasClass('oishi'))){
221
+ if (($('#output1').find('.i').hasClass('oishi'))){
184
-
222
+
185
- alert(result);
223
+ alert(result);
186
-
224
+
187
- } else
225
+ } else
226
+
227
+ //２個目にチェックしたやつが「.oishi」を持ってたら、HTMLにある「それを最初にチェックしたらダメです」をアラート
188
228
 
189
229
  if (($('#output1').find('.i').hasClass('mazui'))){
190
230
 
191
- alert(result);
231
+ alert(result);
192
-
232
+
193
- }
233
+ }
194
234
 
195
235
 
196
236
 
237
+ /********************
238
+
239
+ 次のアラートがでない！
240
+
241
+ ********************/
242
+
243
+
244
+
197
- //チェックが２個未満のとき
245
+ //チェックが２個未満のときのアラート
198
-
246
+
199
- }else{
247
+ }else{
200
-
248
+
201
- alert('２個未満ですね');
249
+ alert('２個未満ですね');
202
-
250
+
203
- }
251
+ }
204
252
 
205
253
 
206
254
 
@@ -210,12 +258,6 @@
210
258
 
211
259
  });
212
260
 
213
-
214
-
215
-
216
-
217
-
218
-
219
261
  ```
220
262
 
221
263
  ```css
@@ -297,7 +339,3 @@
297
339
  }
298
340
 
299
341
  ```
300
-
301
- どうしたら``//チェックが２個未満のとき``のアラートが効くようになるか、ご教示いただければと思い質問させて頂きました。
302
-
303
- よろしくお願いいたします。