質問編集履歴
3
さんぷる！
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -33,6 +33,12 @@
|
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
###該当のソースコード
|
|
36
|
+
|
|
37
|
+
下記HTMLとjQueryのサンプルをどうぞ。
|
|
38
|
+
|
|
39
|
+
[https://jsfiddle.net/96bqn8hf/](https://jsfiddle.net/96bqn8hf/)
|
|
40
|
+
|
|
41
|
+
|
|
36
42
|
|
|
37
43
|
まずHTMLです。表示切替の流れを作るため、`<button>`のデータ属性に`outerType`と`innertType`を持たせ、それぞれ表示を切り替えるべき`.outer`と`.inner`に対応させました。
|
|
38
44
|
|
2
ちょい修正！
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -166,11 +166,7 @@
|
|
|
166
166
|
|
|
167
167
|
|
|
168
168
|
|
|
169
|
-
だもんで☆の関数を「中に」でなく「外に」とすれば、『複数』は『１つ』にできるって話なんですが、でもそれだと、
|
|
169
|
+
だもんで☆の関数を「中に」でなく「外に」とすれば、『複数』は『１つ』にできるって話なんですが、でもそれだと、そもそもの目的である★が実現できません。
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
そもそもの★が実現できません。
|
|
174
170
|
|
|
175
171
|
|
|
176
172
|
|
1
修正！
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,7 +18,9 @@
|
|
|
18
18
|
|
|
19
19
|
ざっくりいいますと
|
|
20
20
|
|
|
21
|
-
`<p>cat</p>`と`<p>dog</p>`は非表示中に見えないように挿入したい!!
|
|
21
|
+
★`<p>cat</p>`と`<p>dog</p>`は非表示中に見えないように挿入したい!!
|
|
22
|
+
|
|
23
|
+
★`<p>ape</p>`は表示後に挿入したい!!
|
|
22
24
|
|
|
23
25
|
ということですが、上に『１つ』を強調してあるように、これが『複数』になってしまう問題が発生しました。
|
|
24
26
|
|
|
@@ -26,9 +28,7 @@
|
|
|
26
28
|
|
|
27
29
|
###発生している問題
|
|
28
30
|
|
|
29
|
-
下記jQueryで`<button>`をクリックすると、`<p>cat</p>`
|
|
31
|
+
下記jQueryで`<button>`をクリックすると、`<p>cat</p>`と`<p>dog</p>`が『６つ』ずつ挿入され、`<p>ape</p>`は『２つ』挿入されてしまいます。全部『１つ』でいいのに！
|
|
30
|
-
|
|
31
|
-
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
@@ -80,9 +80,9 @@
|
|
|
80
80
|
|
|
81
81
|
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
☆`fadeOut()`の中に`cat();`と`dog();`を書いた。
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
☆`fadeIn()`の中に`ape();`を書いた。
|
|
86
86
|
|
|
87
87
|
|
|
88
88
|
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
|
|
92
92
|
|
|
93
|
-
ですが、こうすると挿入が『
|
|
93
|
+
ですが、こうすると挿入が『複数』になるわけです。
|
|
94
94
|
|
|
95
95
|
```
|
|
96
96
|
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
|
|
141
141
|
###試したこと
|
|
142
142
|
|
|
143
|
-
上だと『
|
|
143
|
+
上だと『複数』の挿入になり、なぜかといろいろ試していましたところ、どうやら`.outer`と`.inner`の数に応じて挿入されてしまうことがわかりました。
|
|
144
144
|
|
|
145
145
|
|
|
146
146
|
|
|
@@ -148,27 +148,29 @@
|
|
|
148
148
|
|
|
149
149
|
|
|
150
150
|
|
|
151
|
-
`<p>cat</p>`と`<p>dog</p>`は非表示中に見えないように挿入したい!!
|
|
151
|
+
★`<p>cat</p>`と`<p>dog</p>`は非表示中に見えないように挿入したい!!
|
|
152
|
+
|
|
153
|
+
★`<p>ape</p>`は表示後に挿入したい!!
|
|
152
154
|
|
|
153
155
|
という目的のために、
|
|
154
156
|
|
|
155
157
|
|
|
156
158
|
|
|
157
|
-
|
|
159
|
+
☆`fadeOut()`の中に`cat();`と`dog();`を書いた。
|
|
160
|
+
|
|
161
|
+
☆`fadeIn()`の中に`ape();`を書いた。
|
|
158
162
|
|
|
159
163
|
|
|
160
164
|
|
|
161
|
-
をしていて、つまり`fadeout()`後に挿入が実行されるようにしているわけですが、こいつせいで
|
|
165
|
+
をしていて、つまり`fadeout()`後に挿入が実行され、同様に`fadeIn()`の後に実行されるようにしているわけですが、こいつらせいで対象の`.outer`と`.inner`の数だけ挿入が実行されてしまうみたいなんです。
|
|
162
166
|
|
|
163
167
|
|
|
164
168
|
|
|
165
|
-
だもんで
|
|
169
|
+
だもんで☆の関数を「中に」でなく「外に」とすれば、『複数』は『１つ』にできるって話なんですが、でもそれだと、
|
|
166
170
|
|
|
167
171
|
|
|
168
172
|
|
|
169
|
-
`<p>cat</p>`と`<p>dog</p>`は非表示中に見えないように挿入したい!!
|
|
170
|
-
|
|
171
|
-
|
|
173
|
+
そもそもの★が実現できません。
|
|
172
174
|
|
|
173
175
|
|
|
174
176
|
|