Finden Sie das Element und sehen Sie, ob es aktiv ist/hasClass

Question

Ich versuche, auf eine Schaltfläche in meiner Broschüre Map zuzugreifen. Die Schaltfläche wird mit einem Plugin "easy-button" erstellt. Mein Hauptziel ist es, zu sehen, ob die Schaltfläche angeklickt wurde (ist aktiv), ich werde es für die Validierung in einer anderen Funktion verwenden, die hier nicht gezeigt wird.

So sieht das HTML für die Schaltfläche im Browser-Debugger aus (ich glaube der HTML-Code wird vom Plugin erstellt?).

Bevor es

<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair"> 
    <span class="button-state state-add-markers add-markers-active"> 
     <span class="fa fa-crosshairs fa-lg"></span> 
    </span> 
</button> 

geklickt Nachdem es

<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair"> 
    <span class="button-state state-remove-markers remove-markers-active"> 
     <span class="fa fa-undo"></span> 
    </span> 
</button> 

Diese Klick-Funktion Zugriff auf die Schaltfläche und Show ‚wurde Knopf geklickt‘ geklickt, aber die if-Anweisung nicht passieren. Ich bin mit dem Button CSS-Pfad kopieren im Browser auf die Schaltfläche gekommen, aber es scheint sehr lang zu sein.

$("div.leaflet-bar.easy-button-container.leaflet-control > button > span").click(function(){ 
     alert("Button was clicked"); 
     if 
     ($('span').hasClass('fa fa-crosshair fa-lg')) 
     { 
      alert('My button has active class') 
     } 
}); 

Irgendwelche Ratschläge, was ich falsch mache?

Answer 1

Diese

if($('span').hasClass('fa fa-crosshair fa-lg')) 

Wird die nicht Ziel span Sie erwarten es.

Sie wollten

if($('span',this).hasClass('fa fa-crosshair fa-lg')) 

Um die Kinder Spanne der Spanne Ziel Sie auf

geklickt

Answer 2

Führen Sie dieses Beispiel, hoffe, es hilft:

$(document).ready(function() { 
 
    // My example to trigger the click on buttons.. 
 
    $("button > span > span").click(function(){ 
 
    
 
    alert("Button was clicked"); 
 
    
 
    if (
 
     //$(this).hasClass('fa') && <-- You don't need it, both have it 
 
     $(this).hasClass('fa-crosshairs') && 
 
     $(this).hasClass('fa-lg') 
 
    ) { 
 
     alert('My button has active class'); 
 
    } else { 
 
     alert('Ops..'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Unclicked --> 
 
<button class="easy-button-button leaflet-bar-part leaflet-interactive add-markers-active" title="Vis crosshair"> 
 
    <span class="button-state state-add-markers add-markers-active"> 
 
     <span class="fa fa-crosshairs fa-lg">click me</span> 
 
    </span> 
 
</button> 
 

 
<!-- Clicked --> 
 
<button class="easy-button-button leaflet-bar-part leaflet-interactive remove-markers-active" title="Fjern crosshair"> 
 
    <span class="button-state state-remove-markers remove-markers-active"> 
 
     <span class="fa fa-undo">clicked</span> 
 
    </span> 
 
</button>