Clickイベントとevenとodd
jQuery初心者が勉強している中でこれはいいな～。と、思った事柄を書き留めていこうと思う。
今回はClick。そぅ、クリックイベントについて。
意外と使うと機会が多いと思いきや、そこまで使用する機会が無い。
しかし、jQueryの勉強にするにあたっては、とっつきやすいメソッドだと思う。
サンプル
■サンプル概要
・47都道府県のリストを用意
・ボタン二つ用意して「偶数の県名をハイライト」「奇数の県名をハイライト」とする。
・動きは「偶数のボタン」をクリックした時は都道府県リスト内の偶数に属する県名をハイライトして
「奇数のボタン」をクリックした時は奇数に属する県名をハイライトする。
偶数、奇数を取得するフィルターは「even(偶数)」と「odd(奇数)を使用する。
■サンプルはこちら
サンプル
ソースはこんな感じ
$(function() {
//偶数のボタンをクリックした時のイベント
$('#even').click(function() {
//liの偶数に対してactiveのクラスを追加
$('li:even').addClass('active');
//liの奇数に対してactiveのクラスを削除
$('li:odd').removeClass('active');
});
//奇数のボタンをクリックした時のイベント
$('#odd').click(function() {
//liの奇数に対してactiveのクラスを追加
$('li:odd').addClass('active');
//liの偶数に対してactiveのクラスを削除
$('li:even').removeClass('active');
});
});
クリックすることで発生するイベントをうまく使えば、ユーザーが触って楽しむという
部分を幅広く考える事ができると思う。その為に、適材適所なメソッドと必要であればフィルターを
使用することが大事だと思った。
その為にも、このjQueryの勉強は継続できるように頑張りたい。
しかし、日頃から取り組まないとすぐに書き方を忘れてしまう。
