Question

我正在尝试将.hasClass用作 if语句。通过确定被点击元素所属的类，我正在运行几种不同的方法。

如果点击的范围有inactive类，那么我希望：

删除课程inactive
添加新课程active
将下一个兄弟div与definition课下滑（使用.next）

反之，如果点击的范围有一个active类，那么：

删除课程active
添加课程inactive
将下一个兄弟div与课程definition向上滑动。

基本上我正在显示或隐藏某个元素并使用类名添加一些样式。

Full JS Fiddle here：

http://jsfiddle.net/franhaselden/9ms79uhe/3/

我让它工作正常只需使用this作为活动类，但当我尝试添加.hasClass时它停止工作。我错误地使用.hasClass吗？

我在第6行得到错误 undefined不是函数，所以.hasClass行的开头。

这是jQuery：

$( "#jargon-main span" ).click(function() { 
    // if class = "active" then:
      // remove class active
      // add class inactive
      // make .next sibling with class .definition slideUp
    $(this).hasClass("active").removeClass('active').addClass('inactive').next(".definition").slideUp( "fast", function() {});

    // if class = "inactive" then:
        // remove class inactive
        // add class active
        // make .next sibling with class .definition slideDown
     $(this).hasClass("inactive").removeClass('inactive').addClass('active').next(".definition").slideDown( "fast", function() {});

});

Answer 1

顾名思义，jQuery的hasClass返回一个布尔值，它可以是true或false，具体取决于是否具有类。

如果您只想定位具有特定类的元素，可以将其用作常规选择器，或者使用条件

if ( $(this).hasClass("inactive") ) {
    $(this).removeClass('inactive')
           .addClass('active')
           .next(".definition")
           .slideDown( "fast", function() {});
}

还有jQuery的toggleClass会自动切换课程。

$(this).toggleClass('active inactive').next(".definition").slideToggle("fast");

FIDDLE

Answer 2

是。 $.hasClass返回一个布尔值（true或false）。所以你需要一个if条件

if($(this).hasClass("active")){
    $(this).removeClass('active').addClass('inactive').next(".definition").slideUp( "fast", function() {});
}

Answer 3

.hasClass（）返回布尔值，因此您无法从.hasClass（）的结果调用.removeClass（）。

所以工作Js Fiddle将是： http://jsfiddle.net/99qebvjr/1/

$( "#jargon-main span" ).click(function() { 
    // if class = "active" then:
      // remove class active
      // add class inactive
      // make .next sibling with class .definition slideUp
    if($(this).hasClass("active")){         
       $(this).removeClass('active').addClass('inactive').next(".definition").slideUp( "fast", function() {});
    }
    // if class = "inactive" then:
        // remove class inactive
        // add class active
        // make .next sibling with class .definition slideDown
    else if($(this).hasClass("inactive")){
      $(this).removeClass('inactive').addClass('active').next(".definition").slideDown( "fast", function() {});
    }   
});

jQuery使用.hasClass来运行几种不同的方法

3 个答案: