回答編集履歴
1
コメントを受けて訂正
answer
CHANGED
|
@@ -1,26 +1,34 @@
|
|
|
1
|
-
<div id="info" />内は初期状態で非表示かつdeleteボタンクリック後に非表示なので、<p />内の初期値を変更させて頂きました。
|
|
1
|
+
<div id="info" />内は初期状態で非表示かつdeleteボタンクリック後に非表示なので、<p />内の初期値を変更させて頂きました。-- これは元に戻しました。
|
|
2
|
-
置換など難しいことは使わないで、text('')が簡単と思います。
|
|
3
2
|
deleteボタンをクリックせず、「晴れ」、「雨」を再びクリックすると、テキストがどんどん伸びてしまう不具合(?)も直っています。
|
|
3
|
+
|
|
4
|
+
タグを含む文字列の置換はあまりお勧めしません。
|
|
5
|
+
何でもできるのでバグが入り込みやすくなり、DOM構造(HTML)が壊れる恐れがあるからです。
|
|
6
|
+
DOM構造が壊れると収拾がつかなくなります。
|
|
4
7
|
```HTML
|
|
5
8
|
<button id="sunny">晴れ</button>
|
|
6
9
|
<button id="rainy">雨</button>
|
|
7
10
|
|
|
8
11
|
<div id="info" style="display: none;">
|
|
9
|
-
<p>本日の天気は<
|
|
12
|
+
<p>本日の天気は</p>
|
|
10
13
|
<button id="delete">消す</button>
|
|
11
14
|
</div>
|
|
12
15
|
```
|
|
13
16
|
```JavaScript
|
|
14
17
|
(function ($) {
|
|
18
|
+
var originalHtmlBefore = '<p>本日の天気は';
|
|
19
|
+
var originalHtmlAfter = '</p>';
|
|
20
|
+
|
|
15
21
|
$('#sunny, #rainy').click(function(){
|
|
16
22
|
var weather = $(this).text();
|
|
23
|
+
var weatherHtml = originalHtmlBefore + '<b>' + weather + '</b>' + originalHtmlAfter;
|
|
24
|
+
|
|
17
|
-
$('#info > p
|
|
25
|
+
$('#info > p').replaceWith(weatherHtml);
|
|
18
26
|
$('#info').show();
|
|
19
27
|
});
|
|
20
28
|
|
|
21
29
|
$('#delete').click(function(){
|
|
22
30
|
$('#info').hide();
|
|
23
|
-
$('#info > p
|
|
31
|
+
$('#info > p').replaceWith(originalHtmlBefore + originalHtmlAfter);
|
|
24
32
|
});
|
|
25
33
|
})(jQuery)
|
|
26
34
|
```
|