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') == '&#128275;'
      $icon.attr('data-icon', "&#128274;")
    else
      $icon.attr('data-icon', "&#128275;")

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

Answer 1

这是解决方案：

$.parseHTML("&#128274;")[0].data

所以，完整的代码：

$icon = $(event.currentTarget)
if $icon.attr('data-icon') == $.parseHTML("&#128274;")[0].data
      $icon.attr('data-icon', $.parseHTML("&#128275;")[0].data)
    else
      $icon.attr('data-icon', $.parseHTML("&#128274;")[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')=='&#128275;'){
    $("#yourspan").attr('data-icon','&#128274;');
  }
  else{
    $("#yourspan").attr('data-icon','&#128275;')
  }
});

Answer 3

改善Deepu的答案，请查看

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

单击时更改图标字体

3 个答案: