jQuery remove () или after (), вызывающий удаление пробелов

17

У меня есть следующий 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

Почему это происходит и как я могу его предотвратить?

Для дополнительной информации здесь приведен скрипт: Ссылка

Изменить: похоже, эта проблема локализована в Chrome, поскольку она не встречается в FF или IE.

    
задан Morne 10.06.2014 в 16:00
источник
  • Почему для вас так важны пробелы? –  fracz 10.06.2014 в 16:02
  • @ WojciechFrącz Потому что «что-то» и «что-то» не эквивалентны. –  Nit 10.06.2014 в 16:03
  • Белое пространство важно, так как у меня тоже есть красный класс, а иногда красное слово и синее слово идут рядом друг с другом. У них должно быть место, иначе оно станет одним словом. –  Morne 10.06.2014 в 16:05
  • Я уверен, что это не проблема jQuery. Если вы посмотрите в Dev Tools, DOM не изменится вокруг .popup до и после вызова .remove (); это почти похоже на то, что места там никогда не бывает. .append () «работает», потому что он делает что-то совершенно другое - он не влияет на окружающий DOM –  Ian 10.06.2014 в 16:24
  • Я вижу, что вопрос был проголосован за закрытие как вне темы, из-за «проблемы, которая больше не может быть воспроизведена или простая типографская ошибка». Я не думаю, что это так, поскольку его можно легко воспроизвести, и это определенно не опечатка, которая вызвала проблему –  Morne 10.06.2014 в 16:39
Показать остальные комментарии

6 ответов

7

Причина, по которой это происходит, состоит в том, что вы добавили элемент блока (div), элемент блока разбивается на новую строку, а затем, когда он удаляется, он убирает пробелы с ним после него, потому что для HTML пробелы и Новая строка почти одинакова.

У вас есть несколько решений, некоторые из них были упомянуты здесь:

  1. Использовать &nbsp
  2. Поместите пробел внутри тега <i> , а не между тегами, поэтому <i> word</i> будет работать нормально.
  3. Используйте тег <span> вместо тега div на after .
ответ дан Patrick 10.06.2014 в 16:25
  • Что-то примечание: stackoverflow.com/questions/8397852/... –  Ian 10.06.2014 в 16:26
  • Но является ли <p> не блочным элементом? Почему тогда это не происходит? –  Morne 10.06.2014 в 16:28
  • Actuall: jsfiddle.net/6fqDq/16 –  Patrick 10.06.2014 в 16:29
  • Я вижу, что это происходит только в Chrome. FF и IE не вызывает эту проблему, поэтому теперь она переместилась с jQuery на html на проблему с браузером –  Morne 10.06.2014 в 16:42
  • @Morne Это просто странно, в Dev Tools я не вижу явного промежутка между ними, для второго и третьего примеров. Но я вижу это для первого примера –  Ian 10.06.2014 в 16:46
Показать остальные комментарии
6

Я не думаю, что проблема связана с удалением, но с последующим в этом случае, который, вероятно, игнорирует текстовый узел и, следовательно, игнорирует пробел. Если вы используете append, также он помещает элемент в другое место, проблема исчезает.

Ссылка

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;
    }
});
    
ответ дан GillesC 10.06.2014 в 16:10
  • Append работает, я думаю, что это лучшее решение. Он не требует «исправлений». –  Morne 10.06.2014 в 16:15
  • Он не требует никаких исправлений, но также не делает то же самое; он создает всплывающее окно внутри элемента .blue, а не после него. –  Ja͢ck 10.06.2014 в 16:24
  • Убедитесь, что вы не используете пробелы в синем элементе. Иначе вы снова столкнетесь с той же проблемой !!! –  PcPulsar 10.06.2014 в 16:26
1

Не уверен, почему он это делает. Но быстрым решением было бы поместить белое пространство в тег <i> . Вот так:

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

См. Ссылка

    
ответ дан AndrewPolland 10.06.2014 в 16:05
  • Я отвечу на ваш ответ, так как он решит проблему, но я оставлю без ответа вопрос, не могу ли я найти объяснение этого. Спасибо. –  Morne 10.06.2014 в 16:07
  • Хотя это может работать только для обработки отсутствующего пробела, решение является хрупким, например, представьте, если тег <i> имеет стиль с фоном. Это решение, но не хорошее. –  Nit 10.06.2014 в 16:08
  • Спасибо. Звучит как план. :) –  AndrewPolland 10.06.2014 в 16:08
  • @Nit Согласен, но если это работает для сценария, и если это странность с функцией remove (), то я бы сказал, что это хороший способ пойти, не делая код более сложным. –  AndrewPolland 10.06.2014 в 16:10
  • Теперь, увидев другие ответы, похоже, это больше связано с функцией after (), а не с remove (). Поэтому я бы рекомендовал использовать переход к использованию append () вместо after (). –  AndrewPolland 10.06.2014 в 16:13
1

просто добавьте &nbsp;

<p>This is some random text in a paragraph with a <span class="blue">blue</span>&nbsp;<span class="blue">word</span>.</p>
    
ответ дан Anis Hikmat Abu-hmiad 10.06.2014 в 16:09
0

Используйте .append вместо .after()

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

Я не могу объяснить, почему это не сработает. После этого, но я думаю, что это может быть добавление в пробелы

DEMO

    
ответ дан Anton 10.06.2014 в 16:09
  • Append - это совершенно другое решение, поскольку оно добавляет строку внутри синего div вместо синего элемента div. –  PcPulsar 10.06.2014 в 16:15
  • Я согласен, но для моего конкретного случая это не повлияет на результат. Поэтому он решает мою проблему, но не большую проблему. –  Morne 10.06.2014 в 16:19
-1

Не знаете, почему это происходит, но, возможно, замените ваши пространства сущностями? &nbsp; - это пробел. Вы можете сделать это с помощью javascript str.replace('> <', '>&nbsp;<' ) или в php str_replace('> <', '>&nbsp;<', str)

    
ответ дан RaneWrites 10.06.2014 в 16:11
  • Вы, кажется, ошибаетесь в Ajax для Javascript. –  Nit 10.06.2014 в 16:12
  • Да, извините, исправлено, что –  RaneWrites 10.06.2014 в 16:15