Wie bekomme ich ein Datensymbol vom Anker-Tag?

Question

Ich habe dieses 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> 

Wenn Anker geklickt Ich muss die Daten-Symbol-Attribut erhalten und eine andere Daten-Symbol zu setzen (zum Beispiel Auge).

Ich versuche dies:

$("#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"; 
     } 
    }); 

Aber es funktioniert nicht.

Eine Idee, wie kann ich es mit jQuery oder JavaScript implementieren?

Answer 1

nur verwenden jquery .data Funktion

$("#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

Benutzer jquery attr Funktion, um das Attribut Wert.

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

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


}); 

Answer 3

Ist sehr einfach mit reinem JavaScript.

var iconData = measureButton.dataset.icon; 

Answer 4

Wie Tushar angegeben:

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