单击时更改图标字体

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)

Answer 2

<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','🔓')
  }
});

Answer 3

改善Deepu的答案，请查看

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