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

Question

这是我的html：

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

当我点击 span 标签时，我希望 data-icon 会改变：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)

Answer 2

通过 Deepu 改进答案，检查这个

$('body').on('click', '#yourspan', function(){
  if($(this).attr('data-icon')=='🔓'){
    $(this).attr('data-icon','🔒');
  }
  else{
    $(this).attr('data-icon','🔓');
  }
});

Answer 3

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

使用跨度的 id

$("#yourspan").on('click',function(){
  if($("#yourspan").attr('data-icon')=='🔓'){
    $("#yourspan").attr('data-icon','🔒');
  }
  else{
    $("#yourspan").attr('data-icon','🔓')
  }
});