javascript - 单击它时更改图标字体

Question

这是我的 html:

<div class="menu">
  <span aria-hidden="true" class="btn" data-icon="&#128275;"></span>
</div>

当我点击 span 标签时，我希望数据图标会发生变化:data-icon="🔓

$icon = $(event.currentTarget)
if $icon.attr('data-icon') == '🔓'
      $icon.attr('data-icon', "🔒")
    else
      $icon.attr('data-icon', "🔓")

但是，尽管“数据图标”已正确更改，但屏幕显示的是字符串 🔓 而不是图标。

Answer 1

这是解决方案:

$.parseHTML("🔒")[0].data

那么，完整的代码:

$icon = $(event.currentTarget)
if $icon.attr('data-icon') == $.parseHTML("🔒")[0].data
      $icon.attr('data-icon', $.parseHTML("🔓")[0].data)
    else
      $icon.attr('data-icon', $.parseHTML("🔒")[0].data)