質問編集履歴

6

(追記)部分にさらに追記しました

2017/08/09 22:17

投稿

hidepon
hidepon

スコア206

test CHANGED
File without changes
test CHANGED
@@ -208,11 +208,13 @@
208
208
 
209
209
  1. colorboxの項目(Label)をクリックするとsidebarsの領域にコピーされる。
210
210
 
211
- 2. sidebarsの領域に追加された項目(Label)をクリックしても他の領域に項目が追加・削除されない。
211
+ 2. sidebarsの領域に追加された項目(Label)をクリックしても他の領域に項目が追加・削除されない。(labelの色が変化しない)
212
+
212
-
213
+ ※現象としてデバッグすると
214
+
213
-
215
+ if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
216
+
214
-
217
+ の処理が繰り返し行われているようです。
215
-
216
218
 
217
219
 
218
220
 

5

(追記)として問題点を簡略化して表記しました。

2017/08/09 22:17

投稿

hidepon
hidepon

スコア206

test CHANGED
File without changes
test CHANGED
@@ -194,6 +194,30 @@
194
194
 
195
195
 
196
196
 
197
+ (追記)
198
+
199
+ 問題点
200
+
201
+ 2つの領域(colorbox、sidebars)に項目(label)が表示されている
202
+
203
+ 初期状態で表示されている sidebarsの領域の項目(Label)をクリックすると別領域に項目が追加・削除される。
204
+
205
+
206
+
207
+ ところが、
208
+
209
+ 1. colorboxの項目(Label)をクリックするとsidebarsの領域にコピーされる。
210
+
211
+ 2. sidebarsの領域に追加された項目(Label)をクリックしても他の領域に項目が追加・削除されない。
212
+
213
+
214
+
215
+
216
+
217
+
218
+
219
+
220
+
197
221
  原因が全く分からず、途方に暮れています。
198
222
 
199
223
  宜しくお願いいたします。

4

タイトル変更します。

2017/08/09 22:14

投稿

hidepon
hidepon

スコア206

test CHANGED
@@ -1 +1 @@
1
- Jquery で意図しないループが発生す
1
+ Jquery でループ処理で無いのに、なぜかif制御文2度実行され
test CHANGED
File without changes

3

端的に表示をすべく、記述を短縮しました。

2017/08/09 15:21

投稿

hidepon
hidepon

スコア206

test CHANGED
File without changes
test CHANGED
@@ -1,44 +1,10 @@
1
1
  JQueryのプラグインColorbox とslidebars を用いて開発をしています。
2
2
 
3
- Colorbox内で
3
+ sidebarsに形成されたラベルをクリックすると
4
4
 
5
- ```
5
+ 他の要素に追加されたり削除したりします。以下はsidebarsの状態です。
6
6
 
7
- <div class="checkbox text-center" id="additional_members_list">
8
-
9
- <input type="checkbox" name="cb-member" id="na_member1" class="dwn_member" value="001">
10
-
11
- <label for="dwn_member1" class="cbna-member" id="label_add1">
12
-
13
- <span id="na_member_name1">TEST6</span>
14
-
15
- </label>
16
-
17
- <input type="checkbox" name="cb-member" id="na_member2" class="dwn_member" value="003">
18
-
19
- <label for="dwn_member2" class="cbna-member" id="label_add2">
20
-
21
- <span id="na_member_name2">TEST7</span>
22
-
23
- </label>
24
-
25
- <input type="checkbox" name="cb-member" id="na_member3" class="dwn_member" value="008">
26
-
27
- <label for="dwn_member3" class="cbna-member" id="label_add3">
28
-
29
- <span id="na_member_name3">TEST8</span>
30
-
31
- </label>
32
-
33
- </div>
34
-
35
- ```
36
-
37
- のラベルをクリックすると
38
-
39
-
40
-
41
- sidebarsの項目に追加されたり他の要素に追加されたり、削除されたりします。
7
+ また、colorboxので生成された要素をクリックすると以下のsidebarsの要素に追加されます。
42
8
 
43
9
  ```
44
10
 
@@ -66,357 +32,21 @@
66
32
 
67
33
  ```
68
34
 
35
+
36
+
69
- に追加されま
37
+ colorboxの要素をクリックしてsidebarsに追加されたラベルをクリックしても色が反転しせん
38
+
39
+ 以下にsidebarsにて他の要素に転送するJSを記載しますが、下側のJSで
40
+
41
+ if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
42
+
43
+ の判定を行い処理を行うのですが、何故か再び処理を繰り返す挙動を示し、色の反転や転送動作が動きません。どこがおかしいのか分からず困っています。
70
44
 
71
45
 
72
46
 
73
- このとき、sidebarsに追加された部分でラベルをクリックしても色が反転しません。
74
-
75
- 以下にcolorboxからsidebarsに転送するJSとsidebarsにて他の要素に転送するJSを記載しますが、下側のJSでループをするような挙動を示し、色の反転や転送動作が動きません。どこがおかしいのか分からず困っています。
76
-
77
- 初期からsidebarsにある要素は色の反転とか稼働します。
47
+ ただ、初期からsidebarsにある要素は色の反転とか稼働します。
78
48
 
79
49
 
80
-
81
-
82
-
83
- ```
84
-
85
- //colorboxからsidebarsへ転送とか
86
-
87
- $('#additional_members_list').on('click', '.cbna-member', function(){
88
-
89
- var index = $(".cbna-member").index(this) + 1;
90
-
91
- var val = $("#na_member" + index).val();
92
-
93
- var str = $("span#na_member_name" + index).html();
94
-
95
- var icon = $("span#icon" + index).html();
96
-
97
- //現在のラベルがチェックされているとき()
98
-
99
- if ( $("label#label_add" + index).hasClass("checked") ){
100
-
101
- //hidden 項目を削除する
102
-
103
- $("div#add_member input").filter(function(){
104
-
105
- return $(this).val() == val;
106
-
107
- }).remove();
108
-
109
- //サイドバーの情報を白に戻す
110
-
111
- var row_num = $("div#additional_member input").length;
112
-
113
- //対象のラベルの場所を探る
114
-
115
- for(var i = 1;i <= row_num ;i++){
116
-
117
- val_sb = $("#sidebar_member" + i).val();
118
-
119
- if(val == val_sb){
120
-
121
- var position = i;
122
-
123
- }
124
-
125
- }
126
-
127
- $("label#lb_sb" + position).removeClass('checked');
128
-
129
- //メンバー一覧から削除
130
-
131
- $("ul#member_list li").filter(function(){
132
-
133
- return $(this).text() == str;
134
-
135
- }).remove();
136
-
137
- $("label#label_add" + index).removeClass('checked');
138
-
139
- }else{
140
-
141
- var count_li = $("ul#member_list li").length;
142
-
143
- var count = $("div#additional_member input").length + 1;
144
-
145
- var row_num = $("div#additional_member input").length;
146
-
147
- //選択したラベルを色反転
148
-
149
- $("label#label_add" + index).addClass('checked');
150
-
151
- //POSTデータ一覧
152
-
153
- var j = 0;
154
-
155
- $("div#additional_member input").filter(function(){
156
-
157
- if(val == $(this).val()){
158
-
159
- j++;
160
-
161
- }
162
-
163
- });
164
-
165
- //サイドバーに登録
166
-
167
- if(j == 0){
168
-
169
- var add_str = '<input type="checkbox" name="checkbox_member" id="sidebar_member' + count + '" class="cb_member" value="' + val + '" /><label for="sidebar_member' + count + '" class="sb_member" id="lb_sb' + count + '"><span id="member_name' + count + '">' + str +'</span><span class="icon icon-temporary">' + icon + '</span></label>';
170
-
171
- $('#additional_member').append(add_str);
172
-
173
- }
174
-
175
- //サイドバーを検索して色を変更する場所を探す
176
-
177
- var j = 0;
178
-
179
- var pos = 0;
180
-
181
- $("div#additional_member input").filter(function(){
182
-
183
- if(val == $(this).val()){
184
-
185
- pos = j;
186
-
187
- }
188
-
189
- j++;
190
-
191
- });
192
-
193
- $("div#additional_member label:eq(" + pos + ")").addClass('checked');
194
-
195
- //POSTデータ一覧
196
-
197
- var j = 0;
198
-
199
- $("div#add_member input").filter(function(){
200
-
201
- if(val == $(this).val()){
202
-
203
- j++;
204
-
205
- }
206
-
207
- });
208
-
209
- //存在しない場合は追加
210
-
211
- if(j == 0){
212
-
213
- $('<input>').attr({
214
-
215
- type: 'hidden',
216
-
217
- class: 'member',
218
-
219
- id: 'member_id' + index ,
220
-
221
- name: 'member[]',
222
-
223
- value: val
224
-
225
- }).appendTo('div#add_member');
226
-
227
- }
228
-
229
- //一覧に登録されていなければ追加
230
-
231
- var j = 0;
232
-
233
- $("ul#member_list li").filter(function(){
234
-
235
- if(str == $(this).text()){
236
-
237
- j++;
238
-
239
- }
240
-
241
- });
242
-
243
- //存在しない場合は追加
244
-
245
- if(j == 0){
246
-
247
- var str_li = '<li id="list_elm' + (count_li + 1) + '">' + str + '</li>';
248
-
249
- $('ul#member_list').append(str_li);
250
-
251
- }
252
-
253
- }
254
-
255
- });
256
-
257
- ```
258
-
259
-
260
-
261
- ```
262
-
263
- //sidemenuから 項目を追加
264
-
265
- // $('.sb_member').click(function(){
266
-
267
- $('#additional_member').on('click', '.sb_member', function(){
268
-
269
- var index = $(".sb_member").index(this);
270
-
271
- var val = $("#sidebar_member" + ( index +1 ) ).val();
272
-
273
- var str = $("span#member_name" + ( index +1 )).html();
274
-
275
- // $("#dw_member" + index).prop("disabled", true);
276
-
277
- //現在のラベルがチェックされているとき
278
-
279
- // if($("label#lb_sb" + index).hasClass("checked")){
280
-
281
- if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
282
-
283
- //hidden 項目を削除する
284
-
285
- $("div#add_member input").filter(function(){
286
-
287
- return $(this).val() == val;
288
-
289
- }).remove();
290
-
291
- //メンバー一覧から削除
292
-
293
- $("ul#member_list li").filter(function(){
294
-
295
- return $(this).text() == str;
296
-
297
- }).remove();
298
-
299
- // $("label#lb_sb" + index).removeClass('checked');
300
-
301
- // $("div#additional_member label:eq(" + index + ")").removeClass('checked');
302
-
303
- //サイドバーを検索して色を変更する場所を探す
304
-
305
- var j = 0;
306
-
307
- var pos = 0;
308
-
309
- $("div#additional_member input").filter(function(){
310
-
311
- if(val == $(this).val()){
312
-
313
- pos = j;
314
-
315
- }
316
-
317
- j++;
318
-
319
- });
320
-
321
- $("div#additional_member label:eq(" + pos + ")").removeClass('checked');
322
-
323
- return false;
324
-
325
- }else{
326
-
327
- var count_li = $("ul#member_list li").length;
328
-
329
- $('<input>').attr({
330
-
331
- type: 'hidden',
332
-
333
- class: 'member',
334
-
335
- id: 'member_id' + (index + 1),
336
-
337
- name: 'member[]',
338
-
339
- value: val
340
-
341
- }).appendTo('div#add_member');
342
-
343
- // $("label#lb_sb" + index).addClass('checked');
344
-
345
- // $("div#additional_member label:eq(" + index + ")").addClass('checked');
346
-
347
- //サイドバーを検索して色を変更する場所を探す
348
-
349
- var j = 0;
350
-
351
- var pos = 0;
352
-
353
- $("div#additional_member input").filter(function(){
354
-
355
- if(val == $(this).val()){
356
-
357
- pos = j;
358
-
359
- }
360
-
361
- j++;
362
-
363
- });
364
-
365
- $("div#additional_member label:eq(" + pos + ")").addClass('checked');
366
-
367
- //string for assigned member section
368
-
369
- var str_li = '<li id="list_elm' + (count_li + 1) + '">' + str + '</li>';
370
-
371
- //POSTデータ一覧
372
-
373
- var j = 0;
374
-
375
- $("div#add_member input").filter(function(){
376
-
377
- if(val == $(this).val()){
378
-
379
- j++;
380
-
381
- }
382
-
383
- });
384
-
385
- //メンバー一覧
386
-
387
- var j = 0;
388
-
389
- $("ul#member_list li").filter(function(){
390
-
391
- if(str == $(this).text()){
392
-
393
- j++;
394
-
395
- }
396
-
397
- });
398
-
399
- //存在しない場合は追加
400
-
401
- if(j == 0){
402
-
403
- $('ul#member_list').append(str_li);
404
-
405
- }
406
-
407
- return false;
408
-
409
- }
410
-
411
- });
412
-
413
-
414
-
415
-
416
-
417
-
418
-
419
- ```
420
50
 
421
51
  ```
422
52
 
@@ -562,12 +192,6 @@
562
192
 
563
193
  ```
564
194
 
565
- 下側のJSで
566
-
567
- if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
568
-
569
- の部分が繰り返されます
570
-
571
195
 
572
196
 
573
197
  原因が全く分からず、途方に暮れています。

2

問題点を追記しました

2017/08/09 14:25

投稿

hidepon
hidepon

スコア206

test CHANGED
File without changes
test CHANGED
@@ -562,8 +562,14 @@
562
562
 
563
563
  ```
564
564
 
565
-
565
+ 下側のJSで
566
+
566
-
567
+ if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
568
+
569
+ の部分が繰り返されます
570
+
571
+
572
+
567
- 全く分からず、途方に暮れています。
573
+ 原因が全く分からず、途方に暮れています。
568
574
 
569
575
  宜しくお願いいたします。

1

一部内容を削除しました

2017/08/09 13:58

投稿

hidepon
hidepon

スコア206

test CHANGED
File without changes
test CHANGED
@@ -270,16 +270,170 @@
270
270
 
271
271
  var val = $("#sidebar_member" + ( index +1 ) ).val();
272
272
 
273
+ var str = $("span#member_name" + ( index +1 )).html();
274
+
275
+ // $("#dw_member" + index).prop("disabled", true);
276
+
277
+ //現在のラベルがチェックされているとき
278
+
279
+ // if($("label#lb_sb" + index).hasClass("checked")){
280
+
281
+ if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
282
+
283
+ //hidden 項目を削除する
284
+
285
+ $("div#add_member input").filter(function(){
286
+
287
+ return $(this).val() == val;
288
+
289
+ }).remove();
290
+
291
+ //メンバー一覧から削除
292
+
293
+ $("ul#member_list li").filter(function(){
294
+
295
+ return $(this).text() == str;
296
+
297
+ }).remove();
298
+
299
+ // $("label#lb_sb" + index).removeClass('checked');
300
+
301
+ // $("div#additional_member label:eq(" + index + ")").removeClass('checked');
302
+
303
+ //サイドバーを検索して色を変更する場所を探す
304
+
305
+ var j = 0;
306
+
307
+ var pos = 0;
308
+
309
+ $("div#additional_member input").filter(function(){
310
+
311
+ if(val == $(this).val()){
312
+
313
+ pos = j;
314
+
315
+ }
316
+
317
+ j++;
318
+
319
+ });
320
+
321
+ $("div#additional_member label:eq(" + pos + ")").removeClass('checked');
322
+
323
+ return false;
324
+
325
+ }else{
326
+
327
+ var count_li = $("ul#member_list li").length;
328
+
329
+ $('<input>').attr({
330
+
331
+ type: 'hidden',
332
+
333
+ class: 'member',
334
+
335
+ id: 'member_id' + (index + 1),
336
+
337
+ name: 'member[]',
338
+
339
+ value: val
340
+
341
+ }).appendTo('div#add_member');
342
+
343
+ // $("label#lb_sb" + index).addClass('checked');
344
+
345
+ // $("div#additional_member label:eq(" + index + ")").addClass('checked');
346
+
347
+ //サイドバーを検索して色を変更する場所を探す
348
+
349
+ var j = 0;
350
+
351
+ var pos = 0;
352
+
353
+ $("div#additional_member input").filter(function(){
354
+
355
+ if(val == $(this).val()){
356
+
357
+ pos = j;
358
+
359
+ }
360
+
361
+ j++;
362
+
363
+ });
364
+
365
+ $("div#additional_member label:eq(" + pos + ")").addClass('checked');
366
+
367
+ //string for assigned member section
368
+
369
+ var str_li = '<li id="list_elm' + (count_li + 1) + '">' + str + '</li>';
370
+
371
+ //POSTデータ一覧
372
+
373
+ var j = 0;
374
+
375
+ $("div#add_member input").filter(function(){
376
+
377
+ if(val == $(this).val()){
378
+
379
+ j++;
380
+
381
+ }
382
+
383
+ });
384
+
385
+ //メンバー一覧
386
+
387
+ var j = 0;
388
+
389
+ $("ul#member_list li").filter(function(){
390
+
391
+ if(str == $(this).text()){
392
+
393
+ j++;
394
+
395
+ }
396
+
397
+ });
398
+
399
+ //存在しない場合は追加
400
+
401
+ if(j == 0){
402
+
403
+ $('ul#member_list').append(str_li);
404
+
405
+ }
406
+
407
+ return false;
408
+
409
+ }
410
+
411
+ });
412
+
413
+
414
+
415
+
416
+
417
+
418
+
419
+ ```
420
+
421
+ ```
422
+
423
+ //sidebarsからさらに転送をしたり削除したり
424
+
425
+ $('#additional_member').on('click', '.sb_member', function(){
426
+
427
+ var index = $(".sb_member").index(this);
428
+
429
+ var val = $("#sidebar_member" + ( index +1 ) ).val();
430
+
273
431
  var jn = $("#jobnumber").val();
274
432
 
275
433
  var str = $("span#member_name" + ( index +1 )).html();
276
434
 
277
- // $("#dw_member" + index).prop("disabled", true);
278
-
279
435
  //現在のラベルがチェックされているとき
280
436
 
281
- // if($("label#lb_sb" + index).hasClass("checked")){
282
-
283
437
  if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
284
438
 
285
439
  //hidden 項目を削除する
@@ -298,10 +452,6 @@
298
452
 
299
453
  }).remove();
300
454
 
301
- // $("label#lb_sb" + index).removeClass('checked');
302
-
303
- // $("div#additional_member label:eq(" + index + ")").removeClass('checked');
304
-
305
455
  //サイドバーを検索して色を変更する場所を探す
306
456
 
307
457
  var j = 0;
@@ -342,10 +492,6 @@
342
492
 
343
493
  }).appendTo('div#add_member');
344
494
 
345
- // $("label#lb_sb" + index).addClass('checked');
346
-
347
- // $("div#additional_member label:eq(" + index + ")").addClass('checked');
348
-
349
495
  //サイドバーを検索して色を変更する場所を探す
350
496
 
351
497
  var j = 0;
@@ -414,154 +560,6 @@
414
560
 
415
561
 
416
562
 
417
-
418
-
419
-
420
-
421
- ```
422
-
423
- ```
424
-
425
- //sidebarsからさらに転送をしたり削除したり
426
-
427
- $('#additional_member').on('click', '.sb_member', function(){
428
-
429
- var index = $(".sb_member").index(this);
430
-
431
- var val = $("#sidebar_member" + ( index +1 ) ).val();
432
-
433
- var jn = $("#jobnumber").val();
434
-
435
- var str = $("span#member_name" + ( index +1 )).html();
436
-
437
- //現在のラベルがチェックされているとき
438
-
439
- if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
440
-
441
- //hidden 項目を削除する
442
-
443
- $("div#add_member input").filter(function(){
444
-
445
- return $(this).val() == val;
446
-
447
- }).remove();
448
-
449
- //メンバー一覧から削除
450
-
451
- $("ul#member_list li").filter(function(){
452
-
453
- return $(this).text() == str;
454
-
455
- }).remove();
456
-
457
- //サイドバーを検索して色を変更する場所を探す
458
-
459
- var j = 0;
460
-
461
- var pos = 0;
462
-
463
- $("div#additional_member input").filter(function(){
464
-
465
- if(val == $(this).val()){
466
-
467
- pos = j;
468
-
469
- }
470
-
471
- j++;
472
-
473
- });
474
-
475
- $("div#additional_member label:eq(" + pos + ")").removeClass('checked');
476
-
477
- return false;
478
-
479
- }else{
480
-
481
- var count_li = $("ul#member_list li").length;
482
-
483
- $('<input>').attr({
484
-
485
- type: 'hidden',
486
-
487
- class: 'member',
488
-
489
- id: 'member_id' + (index + 1),
490
-
491
- name: 'member[]',
492
-
493
- value: val
494
-
495
- }).appendTo('div#add_member');
496
-
497
- //サイドバーを検索して色を変更する場所を探す
498
-
499
- var j = 0;
500
-
501
- var pos = 0;
502
-
503
- $("div#additional_member input").filter(function(){
504
-
505
- if(val == $(this).val()){
506
-
507
- pos = j;
508
-
509
- }
510
-
511
- j++;
512
-
513
- });
514
-
515
- $("div#additional_member label:eq(" + pos + ")").addClass('checked');
516
-
517
- //string for assigned member section
518
-
519
- var str_li = '<li id="list_elm' + (count_li + 1) + '">' + str + '</li>';
520
-
521
- //POSTデータ一覧
522
-
523
- var j = 0;
524
-
525
- $("div#add_member input").filter(function(){
526
-
527
- if(val == $(this).val()){
528
-
529
- j++;
530
-
531
- }
532
-
533
- });
534
-
535
- //メンバー一覧
536
-
537
- var j = 0;
538
-
539
- $("ul#member_list li").filter(function(){
540
-
541
- if(str == $(this).text()){
542
-
543
- j++;
544
-
545
- }
546
-
547
- });
548
-
549
- //存在しない場合は追加
550
-
551
- if(j == 0){
552
-
553
- $('ul#member_list').append(str_li);
554
-
555
- }
556
-
557
- return false;
558
-
559
- }
560
-
561
- });
562
-
563
-
564
-
565
563
  ```
566
564
 
567
565