回答編集履歴
5
誤字修正
test
CHANGED
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
window.addEventListener('load', () => { setTimeout(showOrHide, 2000) });
|
|
77
77
|
|
|
78
78
|
// ⭐️本番用
|
|
79
|
-
// window.addEventListener('load', showOrHide
|
|
79
|
+
// window.addEventListener('load', showOrHide);
|
|
80
80
|
|
|
81
81
|
function showOrHide() {
|
|
82
82
|
if (YOUSO1.childElementCount) { // 要素①-containerに子要素がある場合
|
4
表示・非表示の場合のコード追加
test
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
表示・非表示にしなかった理由は、表示非表示の切り替えだけだとブラウザのデベロッパツールでhtmlを見た時に、非表示のはずの要素②のコードがユーザーに丸見えになるのでよろしくないからです。
|
|
16
16
|
|
|
17
|
-
### コード例
|
|
17
|
+
### コード例（生成・削除）
|
|
18
18
|
```html
|
|
19
19
|
<div id="youso1-container">
|
|
20
20
|
<p>要素①</p>
|
|
@@ -52,3 +52,37 @@
|
|
|
52
52
|
※わかりやすくするために、２秒後に実行するようにしています。
|
|
53
53
|
※実際には瞬時に実行してほしいと思うので、遅延用の`window.addEventListener('load', () => { setTimeout(showOrHide2, 2000) });`を削除して、⭐️本番用のコード`window.addEventListener('load', showOrHide2);`をご利用ください。
|
|
54
54
|
※要素②の内容は、変数`let youso2 =`に、シングルやダブルクォテーションではなく、[テンプレートリテラル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals)で、生成したいHTMLコードをそのまま書いていただいたらいいです。
|
|
55
|
+
|
|
56
|
+
### コード例（表示・非表示）
|
|
57
|
+
それでもやっぱり表示・非表示の切り替えの方がいい！という場合はこちらのJSをご利用ください。
|
|
58
|
+
基本は生成・削除と同じで、処理が生成・削除ではなく、displayのblockとnoneを切り替えるだけです。
|
|
59
|
+
- 要素①コンテイナーの中に子要素があれば、要素②コンテイナーを`display: block;`
|
|
60
|
+
- 子要素がなければ、要素②コンテイナーを`display: none;`
|
|
61
|
+
するという処理をしています。
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<div id="youso1-container">
|
|
65
|
+
<p>要素①</p>
|
|
66
|
+
</div>
|
|
67
|
+
<div id="youso2-container">
|
|
68
|
+
<p>要素②</p>
|
|
69
|
+
</div>
|
|
70
|
+
```
|
|
71
|
+
```javascript
|
|
72
|
+
const YOUSO1 = document.querySelector('#youso1-container');
|
|
73
|
+
const YOUSO2 = document.querySelector('#youso2-container');
|
|
74
|
+
|
|
75
|
+
// わかりやすくするために、動作を遅延させる用
|
|
76
|
+
window.addEventListener('load', () => { setTimeout(showOrHide, 2000) });
|
|
77
|
+
|
|
78
|
+
// ⭐️本番用
|
|
79
|
+
// window.addEventListener('load', showOrHide2);
|
|
80
|
+
|
|
81
|
+
function showOrHide() {
|
|
82
|
+
if (YOUSO1.childElementCount) { // 要素①-containerに子要素がある場合
|
|
83
|
+
YOUSO2.style.display = 'block'; // 要素②を表示
|
|
84
|
+
} else { // 要素①に子要素がない場合
|
|
85
|
+
YOUSO2.style.display = 'none'; // 要素②を非表示
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
```
|
3
ふんわり
test
CHANGED
|
@@ -12,8 +12,7 @@
|
|
|
12
12
|
- 要素①コンテイナーの中に子要素がなければ、要素②コンテイナーの中身が消される
|
|
13
13
|
という処理をしています。
|
|
14
14
|
|
|
15
|
-
表示・非表示にしなかった理由は、表示非表示の切り替えだけだとブラウザのデベロッパツールでhtmlを見た時に、非表示のはずの要素②のコードがユーザーに丸見えになるので
|
|
15
|
+
表示・非表示にしなかった理由は、表示非表示の切り替えだけだとブラウザのデベロッパツールでhtmlを見た時に、非表示のはずの要素②のコードがユーザーに丸見えになるのでよろしくないからです。
|
|
16
|
-
またSEO的にも`display: none;`で非表示の要素が多すぎると不利になるかも…。
|
|
17
16
|
|
|
18
17
|
### コード例
|
|
19
18
|
```html
|
2
表示・非表示にしなかった理由、要素②の内容変更方法
test
CHANGED
|
@@ -11,6 +11,9 @@
|
|
|
11
11
|
- 要素①コンテイナーの中に子要素があれば、要素②が生成される
|
|
12
12
|
- 要素①コンテイナーの中に子要素がなければ、要素②コンテイナーの中身が消される
|
|
13
13
|
という処理をしています。
|
|
14
|
+
|
|
15
|
+
表示・非表示にしなかった理由は、表示非表示の切り替えだけだとブラウザのデベロッパツールでhtmlを見た時に、非表示のはずの要素②のコードがユーザーに丸見えになるので美しくないからです。
|
|
16
|
+
またSEO的にも`display: none;`で非表示の要素が多すぎると不利になるかも…。
|
|
14
17
|
|
|
15
18
|
### コード例
|
|
16
19
|
```html
|
|
@@ -49,3 +52,4 @@
|
|
|
49
52
|
|
|
50
53
|
※わかりやすくするために、２秒後に実行するようにしています。
|
|
51
54
|
※実際には瞬時に実行してほしいと思うので、遅延用の`window.addEventListener('load', () => { setTimeout(showOrHide2, 2000) });`を削除して、⭐️本番用のコード`window.addEventListener('load', showOrHide2);`をご利用ください。
|
|
55
|
+
※要素②の内容は、変数`let youso2 =`に、シングルやダブルクォテーションではなく、[テンプレートリテラル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals)で、生成したいHTMLコードをそのまま書いていただいたらいいです。
|
1
方法とコード備考の修正
test
CHANGED
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
|
|
9
9
|
要素①、②ともにコンテイナーとして親要素で囲い、
|
|
10
10
|
ページが読み込まれた時に、そのコンテイナーの中に要素があるかないかを判断し、
|
|
11
|
-
- 要素①があれば、要素②が生成される
|
|
11
|
+
- 要素①コンテイナーの中に子要素があれば、要素②が生成される
|
|
12
|
-
- 要素①がなければ、
|
|
12
|
+
- 要素①コンテイナーの中に子要素がなければ、要素②コンテイナーの中身が消される
|
|
13
13
|
という処理をしています。
|
|
14
14
|
|
|
15
15
|
### コード例
|
|
@@ -48,4 +48,4 @@
|
|
|
48
48
|
```
|
|
49
49
|
|
|
50
50
|
※わかりやすくするために、２秒後に実行するようにしています。
|
|
51
|
-
※実際に
|
|
51
|
+
※実際には瞬時に実行してほしいと思うので、遅延用の`window.addEventListener('load', () => { setTimeout(showOrHide2, 2000) });`を削除して、⭐️本番用のコード`window.addEventListener('load', showOrHide2);`をご利用ください。
|