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 标签吗？

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 中有两个标签，然后再点击，添加更多<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 个元素，依此类推，因为每次点击后都会有多个p元素。after不会取代任何东西。

于 2013-12-25T07:17:58.387 回答
-1

发生这种情况是因为您在文档中的每个 p 标签之后添加了新的 p 元素（即使在隐藏之后）。

于 2013-12-25T07:11:39.957 回答