Question

我有以下html：

<p>This is some random text in a paragraph with a <span class="blue">blue</span> word.</p>
<p>This is some random text in a paragraph with a <span class="blue">blue</span> <i>word</i>.</p>
<p>This is some random text in a paragraph with a <span class="blue">blue</span> <span class="blue">word</span>.</p>

我的CSS如下：

.blue{
  color:blue;
}
.popup{
  background-color:lightblue;
}

最后我的JS：

var popup = false;
$(".blue").click(function(){
  if (!popup){
    $(this).after("<div class='popup'>This is some popup text</div>");
    popup = true;
  }
  else{
    $(".popup").remove();
    popup = false;
  }
});

现在我的问题是，当我在弹出类上调用remove函数时，它会删除标记之间的空格正如下面的一些答案所解释的那样，after函数也可能导致这种情况。。例如：

<span class="blue">blue</span> <i>word</i>

变为

<span class="blue">blue</span><i>word</i>

当蓝色类后面的文字不在标签中时，它不会这样做：

<span class="blue">blue</span> word

为什么会发生这种情况？如何防止它？

如需进一步参考，这里有一个小提琴：http://jsfiddle.net/6fqDq/

编辑：似乎此问题已本地化为Chrome，因为它不会出现在FF或IE中。

Answer 1

发生这种情况的原因是因为你添加了一个块元素（div），块元素分成了一个新行，然后当它被移除时，它会删除它后面的空格。它，因为对于HTML来说，空格和换行几乎是一样的。

你有几个解决方案，其中一些在这里提到：

使用&nbsp
在标记内放置一个空格而不是标记之间的空格，因此 word可以正常工作。
在。

after

Answer 2

我认为问题不在于删除，而是在这种情况下可能忽略文本节点并因此忽略空格。如果使用append，它也会将元素放在其他地方，问题就会消失。

http://jsfiddle.net/6fqDq/8/

var popup = false;
$(".blue").click(function() {
    if (!popup) {
        $(this).append("<div class='popup'>This is some popup text</div>");
        popup = true;
    } else{
        $(".popup").remove();
        popup = false;
    }
});

Answer 3

不确定为什么会这样做。但快速解决方法是将空白区域放在标记内。像这样：

<p>This is some random text in a paragraph with a <span class="blue">blue</span><i> word</i>.</p>

请参阅http://jsfiddle.net/6fqDq/5/

Answer 4

只需添加 

<p>This is some random text in a paragraph with a <span class="blue">blue</span>&nbsp;<span class="blue">word</span>.</p>

Answer 5

使用.append代替.after()

if (!popup){
    $(this).append("<div class='popup'>This is some popup text</div>");
    popup = true;
}

我无法解释为什么它不能与.after一起使用，但我认为它可以附加在空白上

DEMO

Answer 6

不确定为什么会这样，但可能用实体替换你的空格？  是一个空间。您可以使用javascript str.replace('> <', '> <' )或在php str_replace('> <', '> <', str)

中执行此操作

jQuery remove（）或after（）导致删除空格

6 个答案: