2011-01-06 8 views
0

私のコードがうまくいかない理由を理解しようと怒っています。私が働くアクティブクラス、とli要素を設定していますJQueryセレクタ -

..

私は、「アクティブ」クラスを持っているli要素を選択したい

- そしてそれをビューに別のdivをスライドクリック機能を提供また、クラスによって識別される「アクティブ」ここ

が私のコードです:

$(".contentPanel").click(function() { 
    $(this).siblings().animate({height: minHeight,},500).removeClass("active"); 
    $(this).animate({height: maxHeight,},500).addClass("active"); 
    $('li').removeClass("active"); 
    $(this).children('ul').children('li').addClass("active"); 
    $('.infoPanelSlider').removeClass("active"); 
    $(this).children('.infoPanelWindow').children('.infoPanelSlider').addClass("active"); 
}); 

上記作品、アクティブ「contentPanelSlider」内部のli要素は、クラスをアクティブに与えられています。 。

$( 'li.active')(関数()をクリックしますが....何かを

が、私はこれを書きたい:

次のビットは、私が "立ち往生mはどこです

が、「アクティブ部品のdoesnt動作するようです - 私はちょうどターゲットならば、それは作品 『李』を、アクティブクラスセレクタなし...

、これは事実とは何かを持っている場合、私は思ったんだけどアクティブなクラスは、JQueryでその場で追加され、スタイルシートにハードコードされていませんでしたが、これは完全ですE ..

を推測しますが、私は心が燃え上がっ取得いけないことができます場合は、すべてのliにハンドラをアタッチし、彼らはクラスactive持っているかどうかをチェックすることができ...

+0

サイドノート、あなたのオブジェクトでその末尾のカンマ: '{高さ:minHeightプロパティ、}'構文エラーでIEに中断しますが。それを削除してください... – gnarf

+1

また、 '$(this)'を解決するためにjQueryを4回呼び出すのではなく、 'var $ this = $(this);'のようなことをしてから '$ this'を使ってさらなる操作 – gnarf

答えて

2

を助けてください:でも

$('li').click(function() { 
    if($(this).is('.active')) { 
     // do more 
    } 
}); 

をより良い(あなたは多くの場合li秒)はdelegateイベントです。これにより、が1つだけイベントハンドラに追加されます(以前のソリューションでは、にイベントハンドラが追加され、すべての要素が追加され、より多くのメモリが消費されます)。あなただけの共通の祖先を持っている必要があります:ハンドラが実行されたときにハンドラしない割り当てるときli sが、現時点では、このクラスを持っている場合

ancestor.delegate('li.active', 'click', function() { 
     // do more 
}); 

$('li.active')のみ動作します。したがって、このクラスとはli要素がまだ存在しない場合

$(".contentPanel").click(function(){}); 
$("li.active").click(function(){}); 

は動作しませんが、この

$(".contentPanel").click(function() { 
    // add class to li 
    $('li.active').click(function(){}); 
}); 

が働くだろう。しかし、毎回イベントハンドラを追加するので、一度割り当ててテストする方が良いでしょう。

2

はい、あなたの疑惑は正しいです。 jQueryセレクタは実行時に解決されます。開始ウェブサイトでli.activeを探している場合、何も一致しません。 jQueryはlive()delegate()を提供しています。これは、すべてのクリックイベントをより高いレベルでチェックすることでこの問題を回避することができます。

// will match any click event on any li with the class active when it is clicked: 
$('li.active').live('click', function() { 
    alert('Active Clicked'); 
}); 
2

はい。クラスがオンザフライで追加されたために起こったこと。 jqueryのライブ関数を使用して、クリックイベントをLIにバインドします。

$( 'li.active')$ {live}} {});

0

ライブが動作しない場合は、バインド試すことができます。

$('li.active').bind('click',function(){ 
//do something 
});