Заменить часть строки множественного элемента классом с JS
Я изучаю JS, но все еще есть некоторые проблемы. Мне удалось отредактировать редактор WYSIWYG, чтобы пользователи могли нажимать кнопку «сноска», которая вставляет следующий HTML:
<span class = "footnote" data-toggle = "tooltip" title = "footnote">[FN]</span>
С помощью некоторого CSS я могу поместить число внутри элемента, которое будет считаться вверх:
body {
counter-reset: footnotecounter;
}
span.footnote:before {
counter-increment: footnotecounter;
content: counter(footnotecounter);
position: relative;
top: -0.4em;
visibility: visible;
}
span.footnote {
color: #0389b9;
font-size: 0.875rem;
}
И пример некоторого HTML:
Here is a text with a note.<span class = "footnote" data-toggle = "tooltip" title = "footnote">[FN]</span> And there will be a second one too!<span class = "footnote" data-toggle = "tooltip" title = "footnote">[FN]</span>
На самом деле я использую Popper и Twitter Bootstrap, чтобы показать содержимое «сноски» во всплывающей подсказке.
Теперь я пытаюсь удалить [FN] из всех элементов span, имеющих класс footnote, с помощью следующего javascript:
footnotes = document.getElementsByClassName('footnote');
for (var i = 0; i < length; i++){
footnotes[i].replace("[FN]", " ");
}
Кажется, это не работает, но я не знаю, где моя ошибка. Кроме того, я думаю, что, поскольку я собираюсь использовать JS для изменения сносок, я мог бы вообще отказаться от CSS и использовать JS для создания увеличивающегося числа во всех элементах, верно?
Вот JSFiddle, чтобы показать живой пример.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы должны проверить свойство длина списка узлов сноски. Вы пытаетесь заменить сам элемент, а не текст внутри него. Вы должны заменить свойство textContent или внутренний текст элемента.
Попробуйте следующим образом:
var footnotes = document.getElementsByClassName('footnote');
for (var i = 0; i < footnotes.length; i++){
footnotes[i].textContent = footnotes[i].textContent.replace("[FN]", " ");
}body {
counter-reset: footnotecounter;
}
span.footnote:before {
counter-increment: footnotecounter;
content: counter(footnotecounter);
position: relative;
top: -0.4em;
visibility: visible;
}
span.footnote {
color: #0389b9;
font-size: 0.875rem;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
Here is a text with a note.<span class = "footnote" data-toggle = "tooltip" title = "footnote">[FN]</span> And there will be a second one too!<span class = "footnote" data-toggle = "tooltip" title = "footnote">[FN]</span>
</p>Обновление: Согласно обсуждению в комментариях
var footnotes = document.getElementsByClassName('footnote');
for (var i = 0; i < footnotes.length; i++){
footnotes[i].innerHTML = footnotes[i].textContent.replace("[FN]", "<span class='new'>"+ (i+1) +"</span> ");
}body {
counter-reset: footnotecounter;
}
span.new{
position: relative;
top: -0.4em;
visibility: visible;
}
span.footnote {
color: #0389b9;
font-size: 0.875rem;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
Here is a text with a note.<span class = "footnote" data-toggle = "tooltip" title = "footnote">[FN]</span> And there will be a second one too!<span class = "footnote" data-toggle = "tooltip" title = "footnote">[FN]</span>
Here's the number 3 thanks to CSS: <span class = "footnote" data-toggle = "tooltip" title = "footnote">[FN]</span> and number 4 <span class = "footnote" data-toggle = "tooltip" title = "footnote">[FN]</span>. All of this thanks to the CSS counter
</p>@DirkJ.Faber, что ты имеешь в виду под CSS-счетчик? Вы имеете в виду счетчик циклов for? Я считаю, что без какой-либо итерации вы не сможете этого сделать, поскольку текст, который вы хотите заменить, находится в отдельных элементах :)
Раньше я устанавливал число внутри элемента с помощью span.footnote:before и counter-reset: footnotecounter; в CSS, что создавало числа 1,2,3 и т. д. Учитывая, что теперь я все равно использую JS, я решил, что могу сделать это с помощью textContent.replace("[FN]", i+1), что работает. кажется... Затем я могу удалить весь CSS для создания видимых чисел. Имеет ли это смысл?
@DirkJ.Faber, поскольку мне все еще не совсем ясно, не могли бы вы обновить созданную вами скрипку, чтобы я мог увидеть ее вживую и предложить?
Конечно, jsfiddle.net/dirkjf/khsg72qe/12. Вся нумерация выполняется с помощью CSS, а не JS. Но я также мог бы сделать footnotes[i].textContent = footnotes[i].textContent.replace("[FN]", i+1); и удалить весь CSS. Просто моя IDE выдает ошибку. Я получаю тот же результат, хотя.
@DirkJ.Faber, код скрипки кажется мне правильным. Хотя я добавил другое решение, заменив текст элементом ОХВАТЫВАТЬ классом и написанным CSS в этом классе. Поскольку у вас возникли проблемы с IDE, вы можете попробовать это :)
Привет, это работает. Кажется, это проблема только IDE, но это избавляет от ошибки;)
@DirkJ.Faber, это действительно здорово, удачного кодирования :)
Чтобы избавиться от счетчика CSS, я изменил его на
textContent.replace("[FN]", i+1). Кажется, это работает, но моя IDE (PHPStorm) говорит мне, что «типы аргументов не соответствуют параметрам». Скажите, это правильный способ?