• TOP
• 使い方
• サンプル
• プラグイン
• リファレンス
• 使用例

索引

• ├ 使い方 目次
• └ バグノート(1)

1章：jQuery入門

• ├ jQueryのメリット
• ├ readyイベント
• ├ オブジェクトについて
• ├ メソッドについて
• ├ 情報の取得
• ├ イベント(1)
• ├ イベント(2)
• └ 初歩なサンプル

2章：jQuery基礎

• ├ thisについて(1)
• ├ thisについて(2)
• ├ jQueryとDOM要素
• ├ 簡単な演出
• ├ thisから辿る
• ├ 汎用的なアニメ(1)
• ├ 汎用的なアニメ(2)
• ├ アニメの停止
• ├ アニメを管理する仕組み
• └ 汎用的なアニメ(3)

3章：jQuery発展

• ├ イベントフロー(1)
• ├ イベントフロー(2)
• ├ イベントフロー(3)
• ├ 画像のプリロード
• ├ jQueryの高速化
• └ メソッドチェーン

番外編：研究

• ├ イベントを外す
• ├ cssアニメとの連携(1)
• ├ cssアニメとの連携(2)
• ├ cssアニメとの連携(3)
• ├ セレクタの自作(1)
• ├ セレクタの自作(2)
• ├ クロージャ(1)
• ├ クロージャ(2)
• └ クロージャ(3)

スイッチの作成

概要

toggleイベントが廃止されたので

toggleイベントを利用すると簡単にスイッチが作成できるのですが、v1.9で廃止されてしまったため自力で処理を実現しなくてはなりません。ここではフラグを利用したオーソドックスなスイッチの作成法と、cssを利用したhmtlならではの作成法を説明します。
→参考：使い方1章「初歩的なサンプル」の後半

解説

フラグを利用したスイッチの作成

サンプル（switch/01.html）のソースを開いてdiv要素が1つあることを確認してください。最初はOFFの状態なのでOFFと書きました。

jQueryでは最初に以下の部分を確認してください、スイッチの状態はこのフラグで管理します。switch_flgがfalseの時はOFFの状態。trueの時はONの状態とします。

var switch_flg = false;//---最初はoffの状態

続いてclickイベントの処理を確認します。ポイントはif文を利用してswitch_flgの状態に応じて処理内容を切り替えている点です。クリックされた時にswitch_flgがtrueの状態、つまりONの状態でクリックされた時は3,4行が実行されるのでテキストがOFFとなり背景色が青くなります。クリックされた時にswitch_flgがfalseの状態、つまりOFFの状態でクリックされた時は7,8行目が実行されるのでテキストがONとなり背景色がオレンジになります。

$("div").click(function(){
	if (switch_flg) {
		$("div").text("off");
		$("div").css("background-color", "#09C");
		switch_flg = false;//---trueの時はfalseに
	}else{
		$("div").text("on");
		$("div").css("background-color", "#F60");
		switch_flg = true;//---falseの時はtrueに
	}
});

そして忘れてはいけないのがswitch_flgの変更です。このサンプルでは5行目と9行目で行っています。スイッチの状態を入れ換えるためにtrueの時はfalseに、falseの時はtrueします。これでクリックする度にフラグがtrue→false→true→falseと交互に繰り返されスイッチとして機能するようになります。

ついでにスイッチで利用される否定演算子のテクニックを紹介します。サンプル（switch/01b.html）を開いてjQueryが以下の様に変更されているのを確認してください。ポイントはif else文の内部で変更されていたswitch_flgの設定が削除され、if else文の外で実行されている点です（9行目）。

$("div").click(function(){
	if (switch_flg) {
		$("div").text("off");
		$("div").css("background-color", "#09C");
	}else{
		$("div").text("on");
		$("div").css("background-color", "#F60");
	}
	switch_flg = !switch_flg;
});

9行目、右辺のswitch_flgの前にある「!」は否定演算子と呼ばれるもので、true/falseを入れ換える処理をします。そのためswitch_flgがtrueの場合はfalseに変更され左辺に代入、falseの場合はtureに変換されて左辺に代入となり、スイッチの状態を入れ換えることができるのです。

さらににif elseの構文は三項演算子で置き換えられるのでサンプル（switch/01c.html）の様に書くこともできます。三項演算子は1ずつしか処理が設定できないのでonFuncとoffFuncを用意しました。

$("div").click(function(){
	switch_flg ? offFunc() : onFunc();
	switch_flg = !switch_flg;
});

これでフラグを利用した方法の説明は終わりです。次項ではcssのクラス属性をフラグの代わりに利用したサンプルを紹介します。

クラス属性をフラグの代わりに利用する

サンプル（switch/02.html）のソースを開いて、body内の構成はswitch/01.htmlと同じ事を確認してください。cssの設定は以下の様にactiveのクラス属性が追加されています。

.active{
	background-color:#F60;
}

続いてjQueryが以下の様に記述されているのを確認して下さい。ポイントは2行目でhasClassメソッドを利用してクリックされた要素にactiveのクラス属性が付いているか否かを調べ、その結果をswitch_flgに代入している点です。activeクラスがあればtrue、なければfalseとなります。

$("div").click(function(){
	var switch_flg = $(this).hasClass("active");		
	if (switch_flg) {
		$("div").text("off");
		$(this).removeClass("active");
	}else{
		$("div").text("on");
		$(this).addClass("active");
	}
});

そしてswitch_flgの値によって処理を分ける点はswitch/01.htmlと同じですがフラグを変更する代わりにaddClassメソッドを利用してクラスを追加したり、removeClassメソッドを利用してクラスを外したりします。結果としてフラグを利用するのと同じようにスイッチを作成する事ができます。

次のページ：イベントを外す

このサイトについて