操作元素类

假设页面包含一个 HTML 元素，如：

<p class="small-paragraph">
  This is a small <a href="https://en.wikipedia.org/wiki/Paragraph">paragraph</a>
  with a <a class="trusted" href="http://stackexchange.com">link</a> inside.
</p>

jQuery 提供了操作 DOM 类的有用函数，最着名的是 hasClass()，addClass()，removeClass() 和 toggleClass()。这些函数直接修改匹配元素的 class 属性。

$('p').hasClass('small-paragraph'); // true
$('p').hasClass('large-paragraph'); // false

// Add a class to all links within paragraphs
$('p a').addClass('untrusted-link-in-paragraph');

// Remove the class from a.trusted
$('a.trusted.untrusted-link-in-paragraph')
.removeClass('untrusted-link-in-paragraph')
.addClass('trusted-link-in-paragraph');

切换类

给出示例标记，我们可以添加一个带有第一个 .toggleClass() 的类：

$(".small-paragraph").toggleClass("pretty");

现在这将返回 true：$(".small-paragraph").hasClass("pretty")

toggleClass 提供相同的效果，代码更少：

if($(".small-paragraph").hasClass("pretty")){
   $(".small-paragraph").removeClass("pretty");}
else {
   $(".small-paragraph").addClass("pretty"); }

切换两个类：

$(".small-paragraph").toggleClass("pretty cool");

添加/删除类的布尔值：

$(".small-paragraph").toggleClass("pretty",true); //cannot be truthy/falsey

$(".small-paragraph").toggleClass("pretty",false);

类切换的功能（请参阅下面的示例以避免出现问题）

$( "div.surface" ).toggleClass(function() {
  if ( $( this ).parent().is( ".water" ) ) {
    return "wet";
  } else {
    return "dry";
  }
});

在示例中使用：

// functions to use in examples
function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
function isOdd(num) { return num % 2;}
var showClass = true; //we want to add the class

例子：

使用元素索引来切换奇数/偶数类

$( "div.gridrow" ).toggleClass(function(index,oldClasses, false), showClass ) {
  showClass
  if ( isOdd(index) ) {
    return "wet";
  } else {
    return "dry";
  }
});

更复杂的 toggleClass 示例，给出了简单的网格标记

<div class="grid">
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow gridfooter">row but I am footer!</div>
</div>

我们的示例的简单函数：

function isOdd(num) {
  return num % 2;
}

function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
var showClass = true; //we want to add the class

使用 gridrow 类为元素添加奇数/偶数类

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  if (isOdd(index)) {
    return "odd";
  } else {
    return "even";
  }
  return oldClasses;
}, showClass);

如果行有 gridfooter 类，则删除奇数/偶数类，保留其余类。

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (isFooter) {
    oldClasses = oldClasses.replace('even', ' ').replace('odd', ' ');
    $(this).toggleClass("even odd", false);
  }
  return oldClasses;
}, showClass);

返回的类是受影响的。这里，如果元素没有 gridfooter，则为偶数/奇数添加一个类。此示例说明了 OLD 类列表的返回。如果删除了这个 else return oldClasses;，只会添加新类，因此如果我们没有返回那些旧类，那么带有 gridfooter 类的行将删除所有类 - 否则它们将被切换（删除）。

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (!isFooter) {
    if (isOdd(index)) {
      return "oddLight";
    } else {
      return "evenLight";
    }
  } else return oldClasses;
}, showClass);