【jQuery】初心者が陥りやすいjQueryの罠3つ
- 2014/12/26
- tan
jQueryはデザイナー向けのと言われるだけあり、扱いが簡単です。
そのためプログラミングはよく分からないけどjQueryはなんとか動かせる…という方も多いです。
私もその一人だったのですが…何度もjQuery罠にハマりました。
中でもはまりやすい有名なものとその解決法を、3つ紹介します。
もくじ
- アニメーションが連続してしまう
- セレクタに「#」や「.」を付け忘れる
- jQueryで追加した要素にイベントセレクタを指定しても、動かない
アニメーションが連続してしまう
単純にアニメーションを設定すると、イベントが起きた数だけアニメーションします。
そのため、イベントを何度も起こすとアニメーションが連続してしまいます。
デモではトリガー1を何度もクリックすると、ターゲット1がいつまでも点滅すると思います。
jQuery
|
1 2 3 |
$('#hoge1').click(function(event) { $('#fuga1').fadeToggle(); }); |
html
|
1 2 3 4 |
<div class="block" id="block1"> <p class="hoge" id="hoge1">トリガー1</p> <p class="fuga" id="fuga1">ターゲット1</p> </div> |
トリガー1
ターゲット1
.stop(true,true)をつけましょう
stopは指定した要素が動作中のアニメーションを中止する関数です。
アニメーションはstopとセットで使うようにすれば間違いないです。
jQuery
|
1 2 3 |
$('#hoge2').click(function(event) { $('#fuga2').stop(true,true).fadeToggle(); }); |
html
|
1 2 3 4 |
<div class="block" id="block2"> <p class="hoge" id="hoge2">トリガー2</p> <p class="fuga" id="fuga2">ターゲット2</p> </div> |
トリガー2
ターゲット2
セレクタに「#」や「.」を付け忘れる
普通に指定したら間違わないかもしれませんが、一度変数に格納したりすると付け忘れることがあります。
jQuery
|
1 2 3 4 5 |
$('#hoge3').click(function() { var id = $(this).attr('id'); var targetId = id.replace('hoge', 'fuga'); $(targetId).stop(true,true).fadeToggle(); }); |
html
|
1 2 3 4 |
<div class="block" id="block3"> <p class="hoge" id="hoge3">トリガー3</p> <p class="fuga" id="fuga3">ターゲット3</p> </div> |
トリガー3
ターゲット3
変数の中身に何が入っているかを意識しましょう
3番目のデモでは変数targetIdに入っているのはfuga3だったため、セレクタがうまく指定できていませんでした。
#をつけてあげると動きます。
jQuery
|
1 2 3 4 5 |
$('#hoge4').click(function() { var id = $(this).attr('id'); var targetId = id.replace('hoge', 'fuga'); $('#' + targetId).stop(true,true).fadeToggle(); }); |
html
|
1 2 3 4 |
<div class="block" id="block4"> <p class="hoge" id="hoge4">トリガー4</p> <p class="fuga" id="fuga4">ターゲット4</p> </div> |
トリガー4
ターゲット4
jQueryで追加した要素にイベントセレクタを指定しても、動かない
デモではjQueryで#block5の中にトリガー5の要素を入れています。
.click～が読まれた時にトリガー5は存在していないのでうまく動きません。
jQuery
|
1 2 3 4 |
$('#hoge5').click(function() { $('#fuga5').stop(true,true).fadeToggle(); }); $('#block5').prepend('<p class="hoge" id="hoge5">トリガー5</p>'); |
html
|
1 2 3 |
<div class="block" id="block5"> <p class="fuga" id="fuga5">ターゲット5</p> </div> |
ターゲット5
.onを使いましょう
onは後から追加する要素にもイベントを定義できるので、onを使うと動くようになります。
jQuery
|
1 2 3 4 |
$(document).on('click', '#hoge6', function(){ $('#fuga6').stop(true,true).fadeToggle(); }); $('#block6').prepend('<p class="hoge" id="hoge6">トリガー6</p>'); |
html
|
1 2 3 |
<div class="block" id="block6"> <p class="fuga" id="fuga6">ターゲット6</p> </div> |
ターゲット6
まとめ
以上、初心者がはまりやすい罠をまとめてみました。
～を～すればできるはずなのに、と決めつけてしまうと結構はまってしまいます。
プログラムを書いていると、エラーが出るのは日常茶飯事です。諦めないで書いてみましょう。
解決するには、詳しい人に聞くのが一番の近道だと思います。
コンソールを使ったり、alertを挟んだりなど、エラーの原因を探す方法を知るのも手です。
ネット上には間違った情報や古くて使えなくなっている情報も多いので、気をつけて使いましょうね！
