回答編集履歴
2
表現の修正
answer
CHANGED
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
|
|
16
16
|
そして、次の改善を加えると、
|
|
17
17
|
|
|
18
|
-
- clickイベントハンドラ関数を2回定義
|
|
18
|
+
- clickイベントハンドラ関数を2回定義している部分を「1回定義して変数にキャッシュ」に変更
|
|
19
|
-
- 「class="js-open"」の要素をclickする度に検索している
|
|
19
|
+
- 「class="js-open"」の要素をclickする度に検索している部分を「変数にキャッシュ」に変更
|
|
20
20
|
|
|
21
21
|
下記コードになります。
|
|
22
22
|
|
1
querySelectorAll() の第一引数に配列を渡しても動作する理由
answer
CHANGED
|
@@ -62,6 +62,9 @@
|
|
|
62
62
|
</script>
|
|
63
63
|
```
|
|
64
64
|
|
|
65
|
+
`querySelectorAll()` の第一引数に配列を渡しても動作するのは、querySelectorAll() が内部的にString型への変換を行っており、変換後の文字列が「カンマ区切りのセレクタ文字列」になる為です。
|
|
66
|
+
「カンマ区切りのセレクタ文字列」(`'.header__nav-btn,.cover-darken'`)を渡しても同じ結果となりますが、質問文のコードはクラスセレクタを個別に管理していた為、ここでは配列としました。
|
|
67
|
+
|
|
65
68
|
初めに下記要件を定義しましたが、これは「class="js-open"」な要素が複数存在した場合、`querySelector('js-opened')` によって初めの一つにのみ反応するからです。
|
|
66
69
|
|
|
67
70
|
- 「class="js-open"」な要素が文書内に1個
|