回答編集履歴
1
コード整備
test
CHANGED
|
@@ -5,22 +5,29 @@
|
|
|
5
5
|
|
|
6
6
|
```javascript
|
|
7
7
|
const months = document.querySelectorAll('.month1');
|
|
8
|
+
|
|
9
|
+
// テキストを取得する部分を関数化
|
|
10
|
+
const get_daily_text = daily => daily.querySelector('p').textContent.toLowerCase();
|
|
11
|
+
|
|
12
|
+
// inputイベントで処理を行う
|
|
8
13
|
input.addEventListener('input', function onInput (event) {
|
|
9
14
|
const value = this.value;
|
|
10
15
|
let dailies, not_found;
|
|
11
16
|
months.forEach(month => {
|
|
12
17
|
// month1内のdailyを取得
|
|
13
18
|
dailies = month.querySelectorAll('.daily');
|
|
19
|
+
|
|
14
|
-
// 全てのdailyにinputのテキストが含まれていないことを判定
|
|
20
|
+
// 全てのdailyにinputのテキストが含まれていないことを判定、表示設定
|
|
15
|
-
not_found = dailies.every(daily => !daily
|
|
21
|
+
not_found = dailies.every(daily => !get_daily_text(daily).includes(value));
|
|
22
|
+
month.style.display = not_found? 'none': 'block';
|
|
23
|
+
|
|
16
24
|
// 見付からない場合にはmonth自体のdisplayをnoneにして抜ける
|
|
17
|
-
if (not_found)
|
|
25
|
+
if (not_found) return;
|
|
18
|
-
|
|
26
|
+
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
27
|
// dailyのテキストに応じたdisplayの変更処理
|
|
28
|
+
dailies.map(daily => [daily, get_daily_text(daily)])
|
|
22
|
-
|
|
29
|
+
.forEach(([daily, text]) => {
|
|
23
|
-
daily.style.display =
|
|
30
|
+
daily.style.display = text.includes(value)? 'block': 'none';
|
|
24
31
|
});
|
|
25
32
|
});
|
|
26
33
|
}, false);
|