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