CODEWITHSUNDEEP
javascriptcssjquery-selectors
geogrow
geogrow

Reputation: 505

Find element and see if its active/hasClass

I am trying to access a button in my leaflet map. The button is created using a plugin "easy-button". My main goal is to see if the button has been clicked (is active), I will use it for validation in another function, not shown here.

This is how the html for the button looks like in the browser debugger (I believe the html is created by the plugin?).

Before it's clicked

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

After it's 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"></span>
    </span>
</button>

This click function access the button and show 'Button was clicked' but the if statement does not pass. I got to the button using Copy CSS path in the browser, but it seem really long.

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

Any advice on what I am doing wrong?

Upvotes: 3

Views: 291

Answers (2)

RPichioli
RPichioli

Reputation: 3345

Run this example, hope it helps:

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

Upvotes: 1

Jamiec
Jamiec

Reputation: 136104

This

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

Will not target the span you are expecting it to.

You wanted

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

To target the child span of the span you clicked on

Upvotes: 1

Related Questions