質問編集履歴

1

ソースコードのサンプル変更、自動生成を想定したコードにしました。

2018/05/18 00:49

投稿

kumakuma112
kumakuma112

スコア21

test CHANGED
File without changes
test CHANGED
@@ -10,73 +10,295 @@
10
10
 
11
11
  プラグインではないのですが、クラス名を毎回書くのがなんかしっくり来てないです。
12
12
 
13
+ いざ、定数のように扱おうと思うと、
14
+
15
+
16
+
17
+ $(〜〜)とaddClassでドットありなしが混在するため、
18
+
19
+ うまくまとめられないくてどうしたものかと考えてました。
20
+
13
- いざ、定数のように扱おうと思うと、セレクターとaddClassでドット入れる入れないという問題もあり、どこまでやるのが、メンテしやすい&見やすいソースコードになるのか、わからないです。
21
+ メンテしやすい&見やすいソースコードになるのか、わからないです。
22
+
23
+
24
+
25
+ Selectorに$("#slider").find(".slider_control")とかをまとめて書くのがスッキリするのですが、
26
+
27
+ ドットやコントロール系を自動生成にしたいため、最初に書くとfindで見つからなくて怒られます。
14
28
 
15
29
 
16
30
 
17
31
  ```JS
18
32
 
33
+ "use strict";
34
+
35
+ /* ========================================================
36
+
37
+ // NOTE スライダー04
38
+
39
+ ======================================================== */
40
+
19
41
  $(function(){
20
42
 
21
43
 
22
44
 
45
+
46
+
23
47
  // NOTE セレクター
24
48
 
49
+ // jQueryオブジェクトをキャッシュ
50
+
25
51
  var Selector = {
26
52
 
27
- TARGET : '#slider',
53
+ TARGET : $('#slider')
28
-
29
- VIEW : '.slider_view_item',
54
+
30
-
31
- NAV : '.slider_nav_item',
32
-
33
- PREV : '.slider_control_item-prev',
34
-
35
- NEXT : '.slider_control_item-next'
36
-
37
- }
55
+ }
38
-
39
-
40
-
56
+
57
+
58
+
59
+
60
+
41
- // NOTE クラス名(ステート)
61
+ // NOTE クラス名
42
62
 
43
63
  var ClassName = {
44
64
 
45
- ACTIVE : 'is-active'
65
+ ACTIVE : 'is-active',
66
+
46
-
67
+ CONTAINER : 'slider',
68
+
69
+ VIEW : 'slider_view',
70
+
71
+ ITEM : 'slider_view_item',
72
+
73
+ NAV : 'slider_nav',
74
+
75
+ DOT : 'slider_nav_item',
76
+
77
+ CONTROL : 'slider_control',
78
+
79
+ BUTTON : 'slider_control_item',
80
+
81
+ PREV : 'slider_control_item-prev',
82
+
83
+ NEXT : 'slider_control_item-next'
84
+
47
- }
85
+ }
86
+
87
+
88
+
89
+
90
+
48
-
91
+ // NOTE テンプレート
92
+
49
-
93
+ var Html = {
94
+
50
-
95
+ DOT : '<button class="' + ClassName.DOT + '" type="button" data-role="none" role="button"></button>',
96
+
97
+ PREV : '<button class="' + ClassName.BUTTON + ClassName.PREV + '" type="button" data-role="none" role="button"></button>',
98
+
99
+ NEXT : '<button class="' + ClassName.BUTTON + ClassName.NEXT + '" type="button" data-role="none" role="button"></button>'
100
+
101
+ }
102
+
103
+
104
+
105
+
106
+
107
+ // NOTE 現在地を確認する変数
108
+
109
+ var index = 1;
110
+
111
+
112
+
113
+
114
+
115
+ // NOTE スライダーの数
116
+
117
+ var count = $(ClassName.ITEM).length;
118
+
119
+
120
+
121
+
122
+
51
- //NOTE 設定
123
+ // NOTE 設定
52
124
 
53
125
  function init(){
54
126
 
55
127
 
56
128
 
57
- $(Selector.TARGET).addClass('slider');
129
+ // NOTE スライド要素にクラスを追加
58
-
59
-
60
-
130
+
61
- $(Selector.TARGET).children().each(function(i){
131
+ Selector.TARGET.children().each(function(){
62
-
132
+
63
- $(this).addClass('slider_view_item');
133
+ $(this).addClass(ClassName.ITEM);
64
134
 
65
135
  });
66
136
 
67
137
 
68
138
 
139
+ // NOTE #sliderにクラスを追加と親タグを用意
140
+
141
+ Selector.TARGET
142
+
143
+ .addClass(ClassName.CONTAINER)
144
+
69
- $(Selector.TARGET).wrapInner('<div class="slider_view">');
145
+ .wrapInner('<div class="' + ClassName.VIEW + '">')
146
+
70
-
147
+ .append('<div class="' + ClassName.NAV + '"/>')
148
+
71
-
149
+ .append('<div class="' + ClassName.CONTROL + '"/>');
150
+
151
+
152
+
72
-
153
+ // NOTE ドットナビを生成
154
+
155
+ console.log(Selector.TARGET.find(ClassName.ITEM));
156
+
157
+ Selector.TARGET.find(ClassName.ITEM).each(function(i){
158
+
159
+ Selector.TARGET.find(ClassName.NAV).append(Html.DOT);
160
+
161
+ $(ClassName.DOT).on("click",function(){
162
+
163
+ view(i + 1);
164
+
73
- ~~~~
165
+ });
166
+
74
-
167
+ });
168
+
169
+
170
+
75
-
171
+ // NOTE 矢印コントローラーを生成
172
+
76
-
173
+ Selector.TARGET
174
+
175
+ .find(ClassName.CONTROL)
176
+
177
+ .append(Html.PREV)
178
+
179
+ .append(Html.NEXT);
180
+
181
+
182
+
183
+ $(ClassName.BUTTON).each(function(i){
184
+
185
+ $(ClassName.PREV).on("click",function(){
186
+
187
+ view(i - 1);
188
+
189
+ });
190
+
191
+ $(ClassName.NEXT).on("click",function(){
192
+
193
+ view(i + 1);
194
+
195
+ });
196
+
197
+
198
+
199
+ });
200
+
201
+
202
+
203
+ // NOTE 最初に1回だけ実行
204
+
205
+ view(index);
206
+
207
+
208
+
77
- }
209
+ }
210
+
211
+
212
+
213
+
214
+
215
+
216
+
78
-
217
+ // NOTE 更新が必要なモジュールをアップデート
218
+
79
-
219
+ function view(val){
220
+
221
+
222
+
223
+ index = val;
224
+
225
+
226
+
227
+ // スライド画像を更新
228
+
229
+ console.log($(ClassName.ITEM));
230
+
231
+ $(ClassName.ITEM)
232
+
233
+ .hide()
234
+
235
+ .each(function(i){
236
+
237
+ if(index == i + 1){
238
+
239
+ $(this).show();
240
+
241
+ return false;
242
+
243
+ }
244
+
245
+ });
246
+
247
+
248
+
249
+ // ドットのナビを更新
250
+
251
+ $(ClassName.DOT)
252
+
253
+ .removeClass(ClassName.ACTIVE)
254
+
255
+ .each(function(i){
256
+
257
+ if(index == i + 1){
258
+
259
+ $(this).addClass(ClassName.ACTIVE);
260
+
261
+ return false;
262
+
263
+ }
264
+
265
+ });
266
+
267
+
268
+
269
+ // 矢印ボタンを更新
270
+
271
+ if(index <= 1){
272
+
273
+ $(ClassName.PREV).hide();
274
+
275
+ } else {
276
+
277
+ $(ClassName.PREV).show();
278
+
279
+ }
280
+
281
+ if(index >= count){
282
+
283
+ $(ClassName.NEXT).hide();
284
+
285
+ } else {
286
+
287
+ $(ClassName.NEXT).show();
288
+
289
+ }
290
+
291
+
292
+
293
+ }
294
+
295
+
296
+
297
+
298
+
299
+
300
+
301
+
80
302
 
81
303
  //NOTE 実行
82
304
 
@@ -84,6 +306,10 @@
84
306
 
85
307
 
86
308
 
309
+
310
+
311
+ });
312
+
87
313
  ```
88
314
 
89
315