アンカータグからdata-iconを取得する方法は？

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> 

アンカーは、私がデータ-icon属性を取得するには、別のデータ・アイコン（例えば目）を設定する必要がクリックされたとき。

私はこれ試してみてください。

$("#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のattrの関数を使用します。

 $("#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を使用すると非常に簡単です。 Tushar同様

var iconData = measureButton.dataset.icon; 

Answer 4

が示された： on`の

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