操作元素類

假設頁面包含一個 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);