jQuery toggleClass() 方法

jQuery 中的 toggleClass() 方法用於在為選定元素新增和刪除指定類名之間切換。

它會評估每個元素是否存在指定的類名。如果不存在，則新增它們；如果已存在，則刪除它們，從而建立切換效果。

使用此方法的 “switch” 引數，我們可以指定是刪除還是新增類名。

語法

以下是 jQuery 中 toggleClass() 方法的語法：

$(selector).toggleClass(classname,function(index,currentclass),switch)

引數

此方法接受以下引數：

classname: 指定要切換的一個或多個類名。如果要指定多個類名，則需要用空格分隔類名。
function(index,currentclass): (可選) 一個函式，根據元素的索引位置和當前類名返回一個或多個要切換的類名。
switch: (可選) 一個布林值，指示是新增還是刪除類。
如果設定為 true，則如果類不存在則新增它，如果存在則刪除它。
如果設定為 false，則刪除該類。

示例 1

在以下示例中，我們使用 toggleClass() 方法在為 <div> 元素新增和刪除“highlight”類名之間切換：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").toggleClass("highlight");
  });
});
</script>
<style>
.highlight {
  background-color: yellow;
}
</style>
</head>
<body>
<div>Click the button to toggle the class</div>
<button>Toggle Class</button>
</body>
</html>

執行程式並多次單擊按鈕以檢視 <div> 元素上的切換效果。

示例 2

在此示例中，我們使用 toggleClass() 方法在新增和刪除類名之間切換：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").toggleClass("highlight");
  });
});
</script>
<style>
.highlight {
  background-color: yellow;
}
</style>
</head>
<body>
<div>div element 1.</div>
<div class="highlight">div element 2.</div>
<button>Toggle Class</button>
</body>
</html>

多次單擊按鈕以檢視兩個 <div> 元素上的切換效果。

示例 3

此示例在單擊按鈕時在段落上的三個類（“highlight”、“italic”、“underline”）之間切換，使用當前類來確定要應用的下一個類：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass(function(index, currentClass) {
      if (currentClass === "highlight") {
        return "italic";
      } else if (currentClass === "italic") {
        return "underline";
      } else {
        return "highlight";
      }
    });
  });
});
</script>
<style>
.highlight {
  color: red;
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is one more paragraph.</p>
<button>Toggle Class</button>
</body>
</html>

執行程式並多次單擊按鈕以檢視切換效果。

示例 4

在此示例中，我們使用 toggleClass() 方法的“switch”引數切換類：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $(".add").click(function(){
      $("div").toggleClass("highlight",true);
    });
    $(".remove").click(function(){
      $("div").toggleClass("highlight",false);
    });
  });
</script>
<style>
.highlight {
  background-color: yellow;
}
</style>
</head>
<body>
<div>Div element 1.</div>
<div class="highlight">Div element 2.</div>
<button class="add">Add "highlight" class</button>
<button class="remove">Remove "highlight" class</button>
</body>
</html>

執行程式並單擊按鈕以檢視切換效果。

jquery_ref_html.htm

列印頁面