查找元素并查看其是否 active/hasClass

Question

我正在尝试访问传单地图中的按钮。该按钮是使用插件 "easy-button" 创建的。我的主要目标是查看按钮是否已被单击（处于活动状态），我将在另一个函数中使用它进行验证，此处未显示。

这是按钮的 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>

此点击函数访问按钮并显示 'Button was clicked' 但 if 语句未通过。我在浏览器中使用复制 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>

查找元素并查看其是否 active/hasClass

Find element and see if its active/hasClass

javascript

css

jquery-selectors