teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

コメントを受けて訂正

2016/11/27 12:47

投稿

naomi3
naomi3

スコア1105

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>本日の天気は<b></b>です</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 > b').text(weather);
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 > b').text('');
31
+ $('#info > p').replaceWith(originalHtmlBefore + originalHtmlAfter);
24
32
  });
25
33
  })(jQuery)
26
34
  ```