CSS類別操作--.toggleClass()

詳細內容
分類：JQuery
發佈：2013-08-07, 週三 23:31
點擊數：4275

JQuery:CSS類別操作--.toggleClass()：

.toggleClass()可以用來為匹配的元素進行新增或是刪除CSS類別。實際運作時有點類似開關一樣。如果某個類別存在，那就刪除他，若是不存在那就新增。同一個toggleClass()描述，第一次新增，第二次會變成刪除，然後繼續新增與刪除一直下去。

語法一：

.toggleClass( className )

      className：要進行切換的CSS類別名稱，可以是一個或多個用空白間隔開來的CSS類別名稱。

範例一：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>範例</title>
<style>
.red {
  background: red;
 }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>  
<div class="red">紅色背景1</div>
<div>紅色背景2</div>
<div class="red">紅色背景3</div>
<p id="click1" style="background: gray;width:150px;text-align:center;">按一下這裡切換</p>
<script type="text/javascript">
$("#click1").click(function(){
$("div").toggleClass("red");
})
</script>
</body>
</html>

語法二：

.toggleClass( className, switch )

      className：要進行切換的CSS類別名稱，可以是一個或多個用空白間隔開來的CSS類別名稱。

      switch ：布林值，true則新增類別，false則移除類別。

範例二(取自官網)：

$('#foo').toggleClass(className, addOrRemove);
//相等於
if (addOrRemove) {
  $('#foo').addClass(className);
}
else {
  $('#foo').removeClass(className);
}

語法三：

.toggleClass( [switch ] )

      switch ：布林值，true則新增類別，false則移除類別。

此用語法用於切換原本就存在於匹配元素的類別。理論上switch 則直接指定開或關。不過這裡只使用true似乎還是會進行切換動作。但false確實會移除類別。

範例三：

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>範例</title>
<style>
.mycss{
 background:red;
 color:green;
 }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body> 
<div class="mycss">紅色背景綠色字1</div>
<p id="click1" style="background:gray;width:auto;text-align:center;">按一下使用.toggleClass()切換</p>
<p id="click2" style="background:gray;width:auto;text-align:center;">按一下使用.toggleClass(true)切換</p>
<p id="click3" style="background:gray;width:auto;text-align:center;">按一下使用.toggleClass(false)切換</p>
<script type="text/javascript">
$("#click1").click(function(){
$("div").toggleClass();
})
$("#click2").click(function(){
$("div").toggleClass(true);
})
$("#click3").click(function(){
$("div").toggleClass(false);
})
</script>
</body>
</html>

語法四：

.toggleClass( function(index, class, switch) [, switch ] )

      function：function 是個回呼函式，JQuery會為每個匹配的元素呼叫一次該函式，並且將該函式傳回的值當成CSS類別名稱，傳回值可以是一個類別名稱或是多個由空白間隔開的類別名稱。而這些類別名稱會被進行切換。另外，此function中的this會指向當時正在處理的匹配元素。

      switch ：布林值，true則新增類別，false則移除類別。

範例四(來自官網)：

$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar')) {
  return 'happy';
} else {
  return 'sad';
}
});
 
 

  按個讚!~支持本站!~

FB推薦載入中