jQueryでクラスを追加・削除する

jQueryの勉強を引き続き実施。今回はクラスを追加する『.addClass()』メソッドとクラスを削除する『.removeClass()』を使って実装。ページを表示したときにクラスで指定したスタイル適用させ、ボタンをクリックしたときにクラスで指定したスタイルのオン・オフが切替られるものに仕上げたので備忘録。
今回はスマホのアプリやwebサイトの背景色を変更するイメージです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。

今回の内容

STEP1.ページを表示したときにクラスを追加して背景色を入れる。
jq12_1

STEP2.ボタンをクリックしたときにクラスの追加・削除で背景色を変更する。
jq12_2

スポンサーリンク
スポンサーリンク




STEP1-1. 画面を作成する

まずは、クラスが追加されて背景色が変わる部分を作ります。
クラスを追加する部分はdivで囲み、クラスをつけます。
そして、divで囲った部分にはidを付与しておきます。
今回は、一時的なものなのでcssもhtmlファイル内に書いていきます。
以下、htmlファイルの中身です。

・・・・・cssの部分です・・・・・
<style>
body{
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}
h1{
font-weight: bold;
padding-left: 5px;
}
.backcolor1{
background-color: #80DEEA;
}
.b-c p{
background-color: #FFFFFF;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
}
#colorbtn,#clearbtn:focus{
outline: none;
}
</style>
・・・・・省略。htmlの部分です・・・・・
<div class="container">
<div class="row" id="p-color">
<div class="col-sm-12 b-c">
<h1>見出し</h1>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br>
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br>
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br></p>
<h1>見出し</h1>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br>
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br>
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
</div>
</div>

ここまでだと、以下の画像みたいになっていると思います。↓
jq12_3

続いて、jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。

・・・・・省略・・・・・
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="sample.js"></script>
</body>

STEP1-2. jQueryでページを表示したときにクラスを追加して背景色を入れる

jQueryでページを表示したときにクラスを追加してスタイルを適用させます。
さっそく『.addClass()』メソッドを使用します。今回は水色っぽい色を背景色として表示します。
以下の内容を「sample.js」に記述します。

//クラスを追加する。
$(function(){
	$('#p-color').addClass('backcolor1');
});

どうですか?
以下の画像みたいに背景色が表示されていたらOKです。
※背景色が表示されない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
jq12_1

STEP2-1. ボタンを作成する

続いてSTEP1-1で作ったテキスト部分の下にボタンを追加します。
ボタンはひとまず「変更」と「クリア」の2つをつくります。ボタンにはそれぞれidを付与します。
「変更」ボタンをクリックしたときはクラスを追加し、「クリア」ボタンをクリックしたときはクラスを削除する動作にします。
以下、divで囲った部分の下に追記します。

・・・・・省略・・・・・
<br>
<button class="btn btn-defult" id="colorbtn">変更</button>&nbsp;<button class="btn btn-defult" id="clearbtn">クリア</button>

STEP2-2. jQueryでボタンをクリックしたときにクラスの追加・削除で背景色を変更する

jQueryでボタンをクリックしたときにクラスの追加・削除で背景色を変更させます。
追加は『.addClass()』メソッド、削除は『.removeClass()』を使用します。
以下の内容を「sample.js」に記述します。

//ボタンクリック時にクラスを追加する。
$(function(){
	$('#colorbtn').click(function(){
		$('#p-color').addClass('backcolor1');
	});
	$('#clearbtn').click(function(){
		$('#p-color').removeClass('backcolor1');
	});
});

どうですか?
背景色のオン・オフができていたらOKです。
※背景色が切り替わらない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
jq12_2

今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓

デモサイト

デモサイト

スポンサーリンク
スポンサーリンク




シェアする

フォローする

スポンサーリンク
スポンサーリンク