Question

当单击我的按钮时，“数据图标”属性（控制呈现的图标）会更改，但是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替换了span本身，例如：

<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>

在父div上使用.innerHTML。

Iconify似乎只扫描占位符跨度，这意味着它无法识别对新svg属性的更新。

Iconify对DOM的更改没有反应

0 个答案: