jQuery-動態設定HTML元素的 class 屬性

jQuery/jQuery Mobile 技術文件 》(持續新增中…)

HTML 元素的類別屬性,使用的是 class 關鍵字,與一般的屬性不同的是,JavaScript 對其進行存取必須透過 className 這個屬性名稱,而在 jQuery 操作類別有專屬的方法,包含 addClass() 、 removeClass() 等等,來看看實際的用法。

以 <img> 標籤元素作說明,你可以為一個id 名稱為 cimg 的 <img> 標籤加入新的類別如下:

$('#cimg').addClass('csa') ; 

當這一行執行完畢, csa 這個類別會被加入至 <img /> 標籤,如果要將一個特別的類別從標籤移除,則調用 removeClass() 如下:

$('#cimg').removeClass('csa') ; 

這一行將類別 csa 從 <img> 標籤中移除。考慮以下的範例截圖:
顯示一張圖片,下方的四個色塊表示框線的顏色,按一下特定的色塊,可以套用不同的樣式類別,改變目前圖片的框線顏色。

<div style="margin: 0 auto; width: 100%; text-align: center;">
    <img id="cimg" class="img_border_white" src="images/IMGP0811_l.jpg" />
</div>
<ul>      
    <li style="background-color: silver;onclick="click_handler(0)" ><b>white</b></li>
    <li style="background-color: red;onclick="click_handler(1)"><b>red</b></li>
    <li style="background-color: blue;" onclick="click_handler(2)"><b>blue</b></li>
    <li style="background-color: green;" onclick="click_handler(3)"><b>green</b></li>
</ul>

首先配置一個 <img />  標籤,並且指定其 class 類別屬性與所要呈現的圖片來源。接下來的
<li> 標籤,提供四個不同的色塊,每一個均註冊 click 事件以回應使用者按下色塊的操作。為了測試 class 的新增以及移除效果,建立四個不同的類別樣式如下:

.img_border_white { border: 8px solid white; }
.img_border_red { border: 8px solid red; }
.img_border_blue { border: 8px solid blue; }
.img_border_green { border: 8px solid green; }  

其中分別設定不同顏色的 border 樣式,接下來定義 click_handler() 函式以回應使用者點擊色塊的操作。

var current = 0;
var c_index = [
'img_border_white',
'img_border_red',
'img_border_blue',
'img_border_green'];
function click_handler(c) {
    $('#cimg').removeClass(c_index[current]);
    $('#cimg').addClass(c_index[c]);
    current = c;
}

變數 current 記錄目前套用的類別名稱索引值, c_index 則儲存了四個可能的類別名稱以方便調用。在 click_handler() 函式中,傳入的索引值表示要套用的新類別名稱在陣列 c_index 中的位置索引,首先移除目前套用的類別,然後加入觸發 click 事件的<li> 標籤,其對應的色彩項目類別。

jQuery/jQuery Mobile 技術文件 》(持續新增中…)



沒有留言: