1

This is my html:

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

And when I click on span tag I would like data-icon will change: data-icon="&#128275;

$icon = $(event.currentTarget)
if $icon.attr('data-icon') == '&#128275;'
      $icon.attr('data-icon', "&#128274;")
    else
      $icon.attr('data-icon', "&#128275;")

But although 'data-icon' changed correctly, the screen displays the string &#128275; instead the icon.

Fran b
  • 3,016
  • 6
  • 38
  • 65

3 Answers3

2

This is the solution:

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

So, the complete code:

$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)
Fran b
  • 3,016
  • 6
  • 38
  • 65
0
<div class="menu">
  <span aria-hidden="true" class="btn" data-icon="&#128275;" id="yourspan"></span>
</div>

Using the id of your span

$("#yourspan").on('click',function(){
  if($("#yourspan").attr('data-icon')=='&#128275;'){
    $("#yourspan").attr('data-icon','&#128274;');
  }
  else{
    $("#yourspan").attr('data-icon','&#128275;')
  }
});
웃웃웃웃웃
  • 11,829
  • 15
  • 59
  • 91
  • Thats not work. In addition 'data-icon' works fine with $icon.attr('data-icon', "🔓"). Same behaviour in both cases. – Fran b Jun 03 '13 at 12:49
0

Improving answer by Deepu, check this

$('body').on('click', '#yourspan', function(){
  if($(this).attr('data-icon')=='&#128275;'){
    $(this).attr('data-icon','&#128274;');
  }
  else{
    $(this).attr('data-icon','&#128275;');
  }
});
Bilal Murtaza
  • 785
  • 4
  • 9
  • This doesn't work. It have to be something about html entities and how encode it in the assignation I think. – Fran b Jun 03 '13 at 15:11