Атрибут 'data-icon' (управляет отображаемым значком) изменяется при нажатии моей кнопки, однако iconify, похоже, не обновляет значок.
Я безуспешно пытался приостановить и отменить приостановку наблюдателя мутаций.
В голове
<script src="https://code.iconify.design/1/1.0.2/iconify.min.js"></script>
В теле
<span class="iconify chevron" data-icon="jam:chevron-down" data-inline="false" onclick="expand(0)"></span>
внешний Js
function expand(num) {
var chevron = document.getElementsByClassName('chevron');
var direction = chevron[num].getAttribute('data-icon');
if (direction == 'jam:chevron-down') {
chevron[num].setAttribute('data-icon','jam:chevron-up');
} else {
chevron[num].setAttribute('data-icon','jam:chevron-down');
}
}
Я ожидаю, что значок изменится с шеврона вниз на вверх.
Фактический вывод - это без изменений в данных SVG, однако правильный измененный атрибут.
Я не уверен, возможно ли вообще заменить значок, так как скрипт переключает диапазон заполнителя с помощью svg.
Вместо этого я попытался изменить класс, который также должен изменить значок, но обновление все равно не было.
РЕДАКТИРОВАТЬ: Чтобы преодолеть это, я просто заменил сам диапазон с новым значком, например:
<span class="iconify chevron" data-icon="jam:chevron-down" data-inline="false" onclick="expand(0)"></span>
to
<span class="iconify chevron" data-icon="jam:chevron-up" data-inline="false" onclick="expand(0)"></span>
с использованием .innerHTML в родительском div.
Кажется, что Iconify только сканирует диапазон заполнителей, это означает, что он не распознает обновления атрибутов нового svg.