Найти элемент и посмотреть, если его активный/hasClass

Question

Я пытаюсь получить доступ к кнопке на моей карте листовка. Кнопка создается с помощью плагина «простая кнопка». Моя основная цель - посмотреть, нажата ли кнопка (активна), я буду использовать ее для проверки в другой функции, не показанной здесь.

Как выглядит HTML-код для кнопки в отладчике браузера (я считаю, что html создан плагином?).

Перед тем он щелкнул

<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> 

После того, как щелкнул

<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> 

Этот щелчок доступа Функция кнопки и шоу «кнопка была нажата», но если заявление не проходит. Я добрался до кнопки, используя Копировать CSS-путь в браузере, но это кажется очень длинным.

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

Любые советы о том, что я делаю неправильно?

Answer 1

Это

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

не нацелит span вы ожидаете его.

Вы хотели

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

Чтобы ориентировать ребенка промежуток пролете вы кликнули на

Answer 2

запустить этот пример, надеюсь, что это помогает:

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