Как получить значок данных из метки привязки?

Question

У меня есть этот HTML:

<div id="measureControl" data-role="controlgroup" data-type="vertical"> 
    <a href="#" data-role="button" data-icon="home" id="measureButton" data-iconpos="notext"></a> 
</div> 

Когда якорь нажал мне нужно получить атрибут-значок данных и установить другой-значок данных (например глаз).

Я стараюсь это:

$("#measureButton").click(function() { 
     var el = $(".ui-icon", this); 
     var output = document.getElementById('output'); 
     if (el.hasClass("home")) { 
      el.removeClass("home"); 
      el.addClass("eye"); 
      output.style.display = "block"; 
     } else { 
      measureControls.line.deactivate(); 
      el.removeClass("eye"); 
      el.addClass("home"); 
      output.style.display = "none"; 
     } 
    }); 

Но это не работает.

Любая идея, как я могу реализовать ее с помощью jQuery или JavaScript?

Answer 1

просто использовать JQuery .data функцию

$("#measureButton").click(function() { 
     var currentIcon = $(this).data('icon'); 
     alert(currentIcon); 
     $(this).data('icon','eye'); 
     var currentIcon = $(this).data('icon'); 
     alert(currentIcon); 
    }); 

https://jsfiddle.net/qs9zwwo0/

Answer 2

функции пользователя JQuery атр, чтобы получить значение атрибутов.

 $("#measureButton").click(function() { 
     //to get the data icon. 
     alert($(this).attr('data-icon')); 

     // to set data icon 
     $(this).attr('data-icon','eye'); 


}); 

Answer 3

Очень простой с чистым JavaScript.

var iconData = measureButton.dataset.icon; 

Answer 4

Как Tushar указано:

$(document).on("click", "#measureButton", function(){ 
    $(this).attr("data-icon", "eye").button("refresh"); 
});