Question

最近我写了几行js来检查DOM结构并添加“in”类以防用户点击链接。现在我需要使用 has 属性，但我不知道它是如何使用的。这是代码：

     $(document).on('click', '.collapse-all > a', function () {
     var $collapseList = $(this).closest('#main-content').find('.collapse-list'),
         $container = $collapseList.find('.collapse').removeAttr('style'),
         $collapsed = $collapseList.find('.mehr-pfeil');

     if ($container.filter('.in').length > 0) {
         $container.removeClass('in');
     } else {
         $container.addClass('in');
     }
 });
 $(function () {
     $('.collapse-all > a').click();
 });

// here is my try to check the DOM and add another class on <a> element
 $(function () {
     $container.hasClass('in') {
         if ($container.filter('.in').length > 0) {
             $collapsed.addClass('mehr-pfeil-active');
         } else {
             $collapsed.removeClass('mehr-pfeil-active');
         }
     }
 });

所以现在一切正常但是当我试图检查js是否已将在类中给了.collapse然后我的代码中断了。任何人都可以告诉我我犯了哪些错误

Answer 1

hasClass()返回一个bool，所以你的函数可以检查这样的东西

if($container.hasClass('in')) {
    ...
}

正如TheBlueAussie所述，您的$container也不在您准备好的功能范围内。

快速解决方法是将变量全局化为

var $container;

$(document).on('click', '.collapse-all > a', function () {
    var $collapseList = $(this).closest('#main-content').find('.collapse-list'),
        $collapsed = $collapseList.find('.mehr-pfeil');

    $container = $collapseList.find('.collapse').removeAttr('style');

    ...
}

Answer 2

看看

.hasClass() 检查元素是否有类。

您可以在if和addClass

中使用它

if($('.class').hasClass('className'))
{
    $('.class').addClass('xy');
    //or
    $('.class').removeClass('className');
    //and so on
    //.class could be #id as well
}

Answer 3

您的代码中存在2个问题

1，$container不在您的班级检查功能范围内。

2，你使用hasClass方法的方式是错误的

它将返回true或false。所以你可以在if条件下检查它。

var $collapseList = $(this).closest('#main-content').find('.collapse-list');
$container = $collapseList.find('.collapse');
if ($container.hasClass('in')) {
    $collapsed.addClass('mehr-pfeil-active');
} else {
    $collapsed.removeClass('mehr-pfeil-active');
}

Answer 4

您应该将hasClass语句移动到条件开始，因为此方法返回布尔值（true / false）：

// here is my try to check the DOM and add another class on <a> element
$(function () {
  if ($container.hasClass('in')) {
    if ($container.filter('.in').length > 0) {
      $collapsed.addClass('mehr-pfeil-active');
    } else {
      $collapsed.removeClass('mehr-pfeil-active');
    }
  }
});

您还应在此函数中声明$container变量，或将其初始化移至全局变量。

Answer 5

试试这个

$container.hasClass('in');

或者如果你想切换课程

$container.toggleClass('in')

如何检查已经给定的类并添加另一个

5 个答案: