回答編集履歴
3
修正
test
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
[https://jsfiddle.net/990Lc4z3/
|
|
27
|
+
[https://jsfiddle.net/990Lc4z3/3/](https://jsfiddle.net/990Lc4z3/3/)
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
2
追記
test
CHANGED
|
@@ -1,9 +1,33 @@
|
|
|
1
1
|
- バインドの仕方に無駄がある。
|
|
2
2
|
|
|
3
3
|
- 基本的に同じ要素に設定された同じきっかけのイベントは、同時に全て実行されます（1つの要素に3つのクリックイベントが関連付けられていれば、3つまとめて実行される）
|
|
4
|
+
|
|
5
|
+
― modal-button-wrap__button span にtransistionを設定する。
|
|
4
6
|
|
|
5
7
|
|
|
6
8
|
|
|
7
9
|
整理すると下記のようになりました。
|
|
8
10
|
|
|
9
11
|
[https://jsfiddle.net/ktLmrfw7/7/](https://jsfiddle.net/ktLmrfw7/6/)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
基本は下記の形です。
|
|
16
|
+
|
|
17
|
+
- 取得したオブジェクトを変数に代入。基本的に対象の操作はこの変数を利用して行う。
|
|
18
|
+
|
|
19
|
+
- 全体を1つの関数にまとめ、ロード時にはその関数1つを実行する形にする。
|
|
20
|
+
|
|
21
|
+
- さらにその中で、イベント時に行う操作については1つ1つ関数にまとめる（A）
|
|
22
|
+
|
|
23
|
+
- イベントの設定としては、任意のタイミングでAの関数を利用する。
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
[https://jsfiddle.net/990Lc4z3/1/](https://jsfiddle.net/990Lc4z3/1/)
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
さらに、関数の一つ一つを連想配列形式にまとめなおしたものが出来上がりの形です。
|
|
32
|
+
|
|
33
|
+
まずは基本形についての把握をお願いします。
|
1
修正
test
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
|
|
7
7
|
整理すると下記のようになりました。
|
|
8
8
|
|
|
9
|
-
[https://jsfiddle.net/ktLmrfw7/
|
|
9
|
+
[https://jsfiddle.net/ktLmrfw7/7/](https://jsfiddle.net/ktLmrfw7/6/)
|