7

私はここにいくつかのコードを持っています:

html:

<body>
<p>This is a paragraph.</p>
<button>click me</button>
</body>

Javascript:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide().after('<p>hello world</p>');
  });
});

実は私JQuery 2.0.2も使っています。

私の理解では、 ボタンをクリックするとclick meが"<p>This is paragraph<p>"に置き換えられ<p>hello world</p>ます。

最初のクリックは成功です。ただし、多くhello worldの場合、最初に表示された後に進行の成長率がhello world表示されます。例えば：

こんにちは世界

firebug でソース コードを確認したところ、次のようになっていることがわかりました。

<p style="display: none;">This is a paragraph.</p>
<p>hello world</p>
<p style="display: none;">hello world</p>
<p>hello world</p>
<button>click me</button>

<p>hello world</p>最初のものを新しいものに置き換えなかったのはなぜですか?

pタグを1つだけ表示することを想定していませんか?

4

5 に答える 5

8

それはあなたが段落を作成している原因です

<p>hello world</p>

クリックするたびに、ページ上のすべての要素$('p')のコレクションになります。 段落が多ければ多いほど、追加が増えます。ライブデモ - 問題の例p

display:noneusingに設定されていても、要素は.hide()ドキュメント内に存在します。

あなたがやろうとしていることは、おそらく次のいずれかです。

  $("button").click(function(){
      $("p").html('hello world');
  });


  $("button").click(function(){
      $("p").text('hello world');
  });


  $("button").click(function(){
      $("p").replaceWith('<p>hello world</p>');
  });


  $("button").click(function(){
    $("p").after('<p>Hello world</p>').remove();
  });
于 2013-12-25T07:13:28.277 に答える
1

テキストを変更したい場合は、このようにします

$(document).ready(function(){
  $("button").click(function(){
    $("p").html('hello world');
  });
});

JSフィドル

于 2013-12-25T07:12:41.427 に答える
1

さて、ここで起こっていることは驚くべきことではありません。最初<p>の<p> <p>This is paragraph<p>.

したがって、最初のクリック<p>で DOM に 2 つのタグが作成され、さらにクリックするとさらに<p>タグが追加されます。hide()要素を DOM から削除しません。表示プロパティを変更するだけです。必要に応じて、これを機能させたい場合は、replaceWith()またはを使用remove()して最初の を削除 できます。<p>

  $("p").after('<p>hello world</p>').remove();  //remove the selected `<p>` tag after `<p>is appended.</p>`

また

 $("p").replaceWith('<p>hello world</p>');
于 2013-12-25T07:13:02.253 に答える
1

after('<element/>')要素を生成して選択した要素の後に挿入することを意味し、選択したすべての要素の後に要素を生成して挿入しpます。最初のクリックで 1 つの要素を追加し、2 回目のクリックで 2 つの要素などを追加します。 、クリックするたびに複数のp要素があるためです。after何も置き換えません。

于 2013-12-25T07:17:58.387 に答える
-1

これは、ドキュメント内の各 p タグの後に新しい p 要素を追加したために発生します (非表示の後でも)。

于 2013-12-25T07:11:39.957 に答える