Question

我有一些代码at here：

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。

<小时/> 根据我的理解，当我点击按钮点击我时，"This is paragraph"将被hello world 替换。

第一次点击成功。但是，在显示的第一个hello world之后显示许多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>

为什么第一个hello world没有被新的替换？

它是否只假设显示一个p标签？

Answer 1

这是因为你正在创建段落

hello world

每次点击时，$('p')都是您网页上所有p个元素的集合你有更多的段落...更多追加。 live demo - issue example

即使使用display:none设置为.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();
  });

Answer 2

如果您只想更改文字，那么

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

<强> JS FIDDLE

Answer 3

嗯......这里发生的事情并不令人惊讶......这是应该发生的事情......因为你在隐藏第一个 {{1}之后添加了标签} ..所以你的第一次点击最终在dom中有两个This is paragraph标记并进一步点击，添加了更多标记。 不会删除dom中的元素..只是更改其显示属性...如果您需要，可以使用hide()或replaceWith()删除第一个remove()这是工作，因为你需要

<p>

或

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

Answer 4

after('<element/>')表示生成一个元素并将其插入所选元素之后，您将在所有选定的p元素之后生成并插入元素，在您第一次单击时添加1个元素，在第二个单击2个元素，依此类推，因为每次单击后都有多个p个元素。 after不会取代任何内容。

Answer 5

这是因为你在文档中的每个p标签之后添加了新的p元素（即使在隐藏...之后）

对jQuery中的hide（）。（＆＃34;＆＃34;）感到好奇

HTML：

使用Javascript：

5 个答案: