質問編集履歴
1
問題の部分の書式の修正。 試したことの具体的な内容の修正。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Font Awesomeのiconをクリックして
|
|
1
|
+
Font Awesomeのiconをクリックして５パターンのアイコンに変化させたい。
|
test
CHANGED
|
@@ -86,6 +86,8 @@
|
|
|
86
86
|
|
|
87
87
|
|
|
88
88
|
|
|
89
|
+
|
|
90
|
+
|
|
89
91
|
const addTask = document.querySelector('.add');
|
|
90
92
|
|
|
91
93
|
const list = document.querySelector('.todos');
|
|
@@ -144,15 +146,15 @@
|
|
|
144
146
|
|
|
145
147
|
});
|
|
146
148
|
|
|
147
|
-
//５
|
|
149
|
+
//２パターンのアイコンの切り替え可能。５パターンを作りたい。
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
150
|
+
|
|
151
|
-
|
|
151
|
+
list.addEventListener('click', e => {
|
|
152
|
-
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
153
|
-
|
|
155
|
+
if(e.target.classList.contains('fa-battery-empty')){
|
|
154
|
-
|
|
156
|
+
|
|
155
|
-
|
|
157
|
+
e.target.classList.replace('fa-battery-empty','fa-battery-quarter');
|
|
156
158
|
|
|
157
159
|
}else{
|
|
158
160
|
|
|
@@ -160,7 +162,7 @@
|
|
|
160
162
|
|
|
161
163
|
}
|
|
162
164
|
|
|
163
|
-
});
|
|
165
|
+
});
|
|
164
166
|
|
|
165
167
|
|
|
166
168
|
|
|
@@ -178,10 +180,36 @@
|
|
|
178
180
|
|
|
179
181
|
|
|
180
182
|
|
|
181
|
-
|
|
182
|
-
|
|
183
183
|
### 試したこと
|
|
184
184
|
|
|
185
|
+
２パターンのアイコンの切り替え可能。
|
|
186
|
+
|
|
187
|
+
list.addEventListener('click', e => {
|
|
188
|
+
|
|
189
|
+
if(e.target.classList.contains('fa-battery-empty')){
|
|
190
|
+
|
|
191
|
+
e.target.classList.replace('fa-battery-empty','fa-battery-quarter');
|
|
192
|
+
|
|
193
|
+
}else{
|
|
194
|
+
|
|
195
|
+
e.target.classList.replace('fa-battery-quarter','fa-battery-empty');
|
|
196
|
+
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
５パターンを作りたい。
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
２パターンのアイコンは、どっちかに切り替えれるということで今のコードで解決できるのですが、５パターンになるとarraysを使って複数分岐（if）を使って
|
|
208
|
+
|
|
209
|
+
やらんといかんとなるとこんがらがってしまって、
|
|
210
|
+
|
|
211
|
+
手詰まりになった次第です。
|
|
212
|
+
|
|
185
213
|
|
|
186
214
|
|
|
187
215
|
こちらのソースコードを参考。
|