質問編集履歴
1
問題の部分の書式の修正。 試したことの具体的な内容の修正。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Font Awesomeのiconをクリックして
|
|
1
|
+
Font Awesomeのiconをクリックして５パターンのアイコンに変化させたい。
|
body
CHANGED
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
script
|
|
44
44
|
|
|
45
|
+
|
|
45
46
|
const addTask = document.querySelector('.add');
|
|
46
47
|
const list = document.querySelector('.todos');
|
|
47
48
|
|
|
@@ -71,15 +72,15 @@
|
|
|
71
72
|
addTask.reset();
|
|
72
73
|
}
|
|
73
74
|
});
|
|
74
|
-
//
|
|
75
|
+
//２パターンのアイコンの切り替え可能。５パターンを作りたい。
|
|
75
|
-
|
|
76
|
-
|
|
76
|
+
list.addEventListener('click', e => {
|
|
77
|
+
|
|
77
|
-
|
|
78
|
+
if(e.target.classList.contains('fa-battery-empty')){
|
|
78
|
-
|
|
79
|
+
e.target.classList.replace('fa-battery-empty','fa-battery-quarter');
|
|
79
80
|
}else{
|
|
80
81
|
e.target.classList.replace('fa-battery-quarter','fa-battery-empty');
|
|
81
82
|
}
|
|
82
|
-
});
|
|
83
|
+
});
|
|
83
84
|
|
|
84
85
|
//削除機能
|
|
85
86
|
list.addEventListener('click', e => {
|
|
@@ -88,9 +89,22 @@
|
|
|
88
89
|
}
|
|
89
90
|
});
|
|
90
91
|
|
|
91
|
-
|
|
92
92
|
### 試したこと
|
|
93
|
+
２パターンのアイコンの切り替え可能。
|
|
94
|
+
list.addEventListener('click', e => {
|
|
95
|
+
if(e.target.classList.contains('fa-battery-empty')){
|
|
96
|
+
e.target.classList.replace('fa-battery-empty','fa-battery-quarter');
|
|
97
|
+
}else{
|
|
98
|
+
e.target.classList.replace('fa-battery-quarter','fa-battery-empty');
|
|
99
|
+
}
|
|
100
|
+
});
|
|
93
101
|
|
|
102
|
+
５パターンを作りたい。
|
|
103
|
+
|
|
104
|
+
２パターンのアイコンは、どっちかに切り替えれるということで今のコードで解決できるのですが、５パターンになるとarraysを使って複数分岐（if）を使って
|
|
105
|
+
やらんといかんとなるとこんがらがってしまって、
|
|
106
|
+
手詰まりになった次第です。
|
|
107
|
+
|
|
94
108
|
こちらのソースコードを参考。
|
|
95
109
|
https://teratail.com/questions/222969
|
|
96
110
|
|