使用jquery选择特定元素

Question

我试图做以下几点。当我用下拉按钮类单击标记时，我想看看该按钮是否有一个排序规则类。如果不是，我将使用jquery添加类。

<div class="user-controls">
    <button class="navbar-toggle navbar-btn collapsed">
        <span class="icon-reorder"></span>
    </button>
    <ul class="nav">
        <li class="hidden-xs"></li>
        <li class="hidden-xs"></li>
        <li class="user-profile">
            <a href="#" class="user-menu dropdown-toggle">Toggle</a>
        </li>
    </ul>
</div>

<script>
    $('a.dropdown-toggle').click(function(){
        var a = $('button.navbar-toggle').hasClass('.collapsed');
        alert(a);
    });
</script>

Answer 1

您没有在.的参数中包含hasClass；该参数只是一个类名，而不是选择器。所以：

$('a.dropdown-toggle').click(function(){
    var a = $('button.navbar-toggle').hasClass('collapsed');
    // No dot ----------------------------------^
    alert(a);
});

但是请注意，addClass不会第二次添加类，所以您可以直接调用它，而不需要首先检查。当然，如果您有其他取决于它是否有类的逻辑，那么您将需要使用hasClass。

答:沃尔夫在对这个问题的评论中说：

我想OP想把目标对准相对按钮。导航键切换到点击的锚

如果是这样的话，您可以使用closest到达容器，然后使用find查找容器中的按钮：

$('a.dropdown-toggle').click(function(){
    var a = $(this).closest('.user-controls').find('button.navbar-toggle').hasClass('collapsed');
    alert(a);
});

Answer 2

问题是，您正在为hasClass方法使用选择器语法。即。你的代码有.hasClass('.collapsed');而不是.hasClass('collapsed');

Answer 3

下面的代码检查元素是否具有“折叠”类。如果它没有这个类，它就会添加它。

$('a.dropdown-toggle').on('click', function(){
  var e = $('button.navbar-toggle');
  if (e.hasClass('collapsed')) {
    alert('The element has the class!');
  }else{
    //This adds the collapsed class to it
    e.addClass('collapsed');
  }
});