人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQuery コードについて質問です。
以下コードでクリックした時にanimationでコンテンツを表示して、更にページアンカー機能を付けたいのですが、うまく動作してくれません。
コールバック関数の入れ子には限界があるのでしょうか?またはコードの書き方に問題があるのでしょうか?
何か少しでもヒントになる情報をお寄せ下さい。宜しくお願い致します。

(jquery1.3.2)

●質問者: mune0628
●カテゴリ:ウェブ制作
✍キーワード:jQuery アンカー クリック コンテンツ コード
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● y-kawaz
●60ポイント ベストアンサー

入れ子の数とかは別に問題ないですが、コールバック関数を入れ子にする場合は this が何を指しているかをキチンと把握していないといけません。多分それかなーと思ってthisの使い方だけチェックしたらやはり問題がありました。

とりあえず、コードが見にくかったので整形してみました。

$('#menu a').click(function(){
 $('h1#title').animate(
 {
 marginTop: '0'
 },
 1000 ,
 function(){
 // contentをスライド・イン
 $('#content').slideToggle(
 1000 ,
 function(){
 //SCROLL HANDLING
 //get the href value
 var whereTo = $(this).attr("href");
 var targetLink = whereTo.substring(1); //remove hash
 //if there is a div on this page where id = whereTo, then scroll to it
 if($("#"+targetLink).text() != ''){
 $.scrollTo(
 $("#"+targetLink),
 1000,
 {
 axis: 'y',
 easing: '', 
 onAfter: function(whereTo) {
 setTimeout(
 function() {
 window.location.hash = targetLink;
 hash = window.location.hash;
 },
 100
 );
 }
 }
 );
 } else{
 window.location = rootPath + whereTo;
 }
 }
 );
 }
 );
 return false;
});

このコードでは whereTo という変数を作るために this が1箇所使われてます。

質問者さんはこの this にクリックされた a タグが入っていて欲しいんだと思いますが、この this には一番内側の $('#content') のエレメントが入ってる筈なので、それで動かないんだと思います。

このような場合は this を一度別の変数に入れておくのが常套手段です。以下のように直せば動くんじゃないでしょうか?

$('#menu a').click(function(){
 var clicked_a = this;
 $('h1#title').animate(
 {
 marginTop: '0'
 },
 1000 ,
 function(){
 // contentをスライド・イン
 $('#content').slideToggle(
 1000 ,
 function(){
 //SCROLL HANDLING
 //get the href value
 var whereTo = $(clicked_a).attr("href");
 var targetLink = whereTo.substring(1); //remove hash
 //if there is a div on this page where id = whereTo, then scroll to it
 if($("#"+targetLink).text() != ''){
 $.scrollTo(
 $("#"+targetLink),
 1000,
 {
 axis: 'y',
 easing: '', 
 onAfter: function(whereTo) {
 setTimeout(
 function() {
 window.location.hash = targetLink;
 hash = window.location.hash;
 },
 100
 );
 }
 }
 );
 } else{
 window.location = rootPath + whereTo;
 }
 }
 );
 }
 );
 return false;
});

修正点は変数 clicked_a を導入しただけです。


ちなみに this の使い方しか直しておらず、それ以外のコードには目を通してないので他にバグがった場合は知りません。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ