CSS類別操作--.removeClass()

詳細內容
分類：JQuery
發佈：2013-08-05, 週一 21:17
點擊數：2413

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

.removeClass()方法可以為匹配的元素移除原有的CSS類別。此方法只能單純的移除元素中的CSS類別。可與.addClass()合用，進行CSS類別的移除與新增。

.removeClass( [className ] )

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

.removeClass( function(index, class) )

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

      index：回呼函式的傳入值，JQuery會將匹配索引以此參數傳入，代表第幾個匹配元素。

      currentClass：回呼函式的傳入值，代表目前元素所擁有中的CSS類別。

CSS類別操作--.removeClass()的範例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>addClass範例</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 class="red">紅色背景2</div>
<div class="red">紅色背景3</div>
<script type="text/javascript">
$( "div" ).removeClass(function(index,cc){
if(index==0){
  return "red";
}
if(index==1){
  return;
}
if(index==2){
  return "red";
}
}) ;
</script>
</body>
</html>

容易誤會的地方：

第二種語法用到的是回呼函式，千萬別以為他的傳回值是類別字串，所以就跟第一種語法一樣。或許會有相同的結果，可是其實有本質上的差異。要記住第一種語法的傳入參數是字串，而第二種語法的參數是一個函式。試試看能不能分辨出這三行程式的差異在哪裡？如果你覺得都一樣，或許你該多了解一下函式實字與回呼函式。好吧，其實結果都一樣，只是過程不一樣。

function red(){return "red";}
//第一種語法。
$( "div" ).removeClass("red");
//第一種語法，呼叫red()函式，然後將函式的傳回值當成removeClass的傳入參數。
$( "div" ).removeClass(red());
//第二種語法，將red函式當成輸入參數傳遞給removeClass
$( "div" ).removeClass(red);
 
 

  按個讚!~支持本站!~

FB推薦載入中