jQuery .hasClass 和动态添加的类

Posted 2023-03-05

【中文标题】jQuery .hasClass 和动态添加的类

【英文标题】：jQuery .hasClass And Dynamically Added Classes

【发布时间】：2011-10-13 01:35:25

【问题描述】：

我正在为 jQuery 使用一个名为 JS Scrollpane 的自定义滚动条库，但是当尝试将滚动条应用于已经有滚动条的 DIV 时，它会出现意外结果。所以我要检查的是是否应用了“.jspScrollable”类，如果是，不要应用滚动条。够简单吧？

“.jspScrollable”类是由脚本动态添加的，看起来 jQuery 的 hasClass 方法是静态的而不是动态的，所以它没有看到添加了新类。有什么方法可以检查动态类何时添加到元素中？

不要介意 pageEls.bigcol 行。这只是我存储所有选择器以优化我的代码的一个小对象，因为该网站目前有大约 4000 行 JS 左右。

到目前为止，这是我的代码：

function initScrollers()

    pageEls.bigcol = $(".bigcol").filter(':visible');

    var settings = 
        animateScroll: true,
        autoReinitialise: true,
        hideFocus: true,
        verticalGutter: 15
    ;

    if ( pageEls.bigcol.length && !pageEls.bigcol.hasClass('noScroller') ) 
    
        if ( !pageEls.bigcol.hasClass('.jspScrollable') )
        
            if (pageEls.bigcol.height() > 290)
            
                pageEls.bigcol.jScrollPane(settings);
            
        
    

【参考方案1】：

hasClass 方法参数中不需要 .。

变化：

 if ( !pageEls.bigcol.hasClass('.jspScrollable') )

到

 if ( !pageEls.bigcol.hasClass('jspScrollable') )

【参考方案2】：

拿 .关闭 hasClass() 参数中的类名。它应该是：

 if ( !pageEls.bigcol.hasClass('jspScrollable') )

在 jsFiddle 中工作：http://jsfiddle.net/jfriend00/TsfQ6/

$("#test").addClass("testClass");
alert($("#test").hasClass("testClass"));   // alerts true

顺便说一句，您可以将三重嵌套的 if 语句折叠成这样：

  if ( pageEls.bigcol.length && 
       !pageEls.bigcol.hasClass('noScroller') &&
       !pageEls.bigcol.hasClass('.jspScrollable') &&
       pageEls.bigcol.height() > 290 )  
  
      pageEls.bigcol.jScrollPane(settings);
  

【参考方案3】：

您不需要hasClass 中的点。试试这个：

!pageEls.bigcol.hasClass('jspScrollable')