イベント関連の機能 (4/6)
作成:2010-04-04 20:40
更新:2010-05-11 21:14
更新:2010-05-11 21:14
■toggleによるイベントの切り替え
jQueryには、イベント関係の面白い機能がいろいろとあります。例えば、「toggle」です。これは、クリックするごとに、複数の処理をローテートして呼び出していくものです。
下のリストに簡単なサンプルを掲載しておきます。入力フィールドにテキストを書いてボタンを押すと、最初のクリックでは１番上のメッセージが、２回目のクリックでは２番目のメッセージが……という具合に、３つのメッセージが順に変更されていきます。
ここでは、$(document).readyを使い、$('#btn').toggle(do1,do2,do3);というようにして３つの関数リテラルをローテートして実行するようボタンに設定をしています。実際にクリックしてみて、３つの関数が順番に呼び出されていくことを確認してください。
１つのボタンに、状況に応じて複数の処理を追加するような場合というのがあります。例えば、クリックするごとにイメージを表示したり隠したり、といったものですね。今までは、状況に応じて処理を分岐するなどしなければいけませんでした。が、toggleを利用すると、イメージを表示する・隠すという２つの関数を用意し、それらをtoggleするだけです。１つ１つの処理が別個の関数となり、スクリプトも整理され非常にわかりやすくなります。
《jQuery》.toggle( 関数リテラル1 ,関数リテラル2 , …… );このように、実行する処理を関数リテラルとして用意し、それを必要なだけ引数に設定します。これで、その要素をクリックするごとに、最初の関数リテラルから順に処理を実行していきます。
※利用例
下のリストに簡単なサンプルを掲載しておきます。入力フィールドにテキストを書いてボタンを押すと、最初のクリックでは１番上のメッセージが、２回目のクリックでは２番目のメッセージが……という具合に、３つのメッセージが順に変更されていきます。
ここでは、$(document).readyを使い、$('#btn').toggle(do1,do2,do3);というようにして３つの関数リテラルをローテートして実行するようボタンに設定をしています。実際にクリックしてみて、３つの関数が順番に呼び出されていくことを確認してください。
１つのボタンに、状況に応じて複数の処理を追加するような場合というのがあります。例えば、クリックするごとにイメージを表示したり隠したり、といったものですね。今までは、状況に応じて処理を分岐するなどしなければいけませんでした。が、toggleを利用すると、イメージを表示する・隠すという２つの関数を用意し、それらをtoggleするだけです。１つ１つの処理が別個の関数となり、スクリプトも整理され非常にわかりやすくなります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#btn').toggle(do1,do2,do3);
});
var do1 = function (event){
$('#message1').text($('#text1').val());
}
var do2 = function (event){
$('#message2').text($('#text1').val());
}
var do3 = function (event){
$('#message3').text($('#text1').val());
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="message1" style="background:#FAA">Aメッセージ</div>
<div id="message2" style="background:#AFA">Bメッセージ</div>
<div id="message3" style="background:#AAF">Cメッセージ</div>
<input type="text" id="text1">
<input type="button" id="btn" value="Click">
</body>
</html>
※関連コンテンツ