基本的な使い方:
$(要素のセレクタ).addClass('追加するクラス名');
このコードでは、指定した要素に対して指定したクラスを追加します。
例:
<button id="myButton">クリックしてください</button>
$('#myButton').addClass('btn-primary');
上記の例では、idが"myButton"であるボタン要素に"btn-primary"というクラスを追加しています。
複数のクラスを追加する場合:
$(要素のセレクタ).addClass('クラス1 クラス2 クラス3');
クラス名の間にスペースを入れて記述すると、複数のクラスを一度に追加することができます。
例:
$('#myButton').addClass('btn-primary disabled');
上記の例では、"btn-primary"と"disabled"という2つのクラスをボタン要素に追加しています。
条件に応じてクラスを追加する場合:
$(要素のセレクタ).addClass(function(index, currentClass) {
// 条件を記述し、追加するクラス名を返す
});
関数を使って条件に応じてクラスを追加することもできます。関数内で条件を記述し、追加するクラス名を返します。
例:
$('#myButton').addClass(function() {
if ($(this).attr('disabled')) {
return 'disabled';
} else {
return 'enabled';
}
});
上記の例では、もしボタンが"disabled"属性を持っていれば"disabled"というクラスを追加し、そうでなければ"enabled"というクラスを追加します。
以上がaddClassメソッドの基本的な使い方とコード例です。これを参考にして、jQueryを使って要素にクラスを追加する方法を習得してください。