わかりました、私はそれが実際に何$(this)
をthis
意味するのかを知っています。しかし、私が取り組んでいる小さなプロジェクトは、私が持っているいくつかの重複コードを再利用可能な関数に適合させようとしています。
これで、同じ親div内のその下にある特定のオブジェクトをアニメーション化する関数があります。どちらが機能するか、それは確認されました。ただし、現在、これをトリガーするイベントが2つあります。
1つは読み込みイベントで、この要件に一致する要素に対してループ.ready()
を実行します。これは正常に機能します。$.each()
問題の要素を私が使用する関数に渡すには
$(this)
関数のパラメーターとして、このプロジェクトの仕様に従って、関数がそのパラメーターを受け取り、それを処理します。ただし、問題が発生しているのは、この関数をトリガーするために使用する2番目のイベントです。
これは、要素ごとのクリックベースのイベントです。そのために私が試し.click()
たのは.live()
、オブジェクトを認識する唯一のもののようです.delegate()
。live()
私は現在、このプロジェクトでjQuery1.4.4を使い続けています。だから.on()
私には利用できないか、私もそれを試してみます。delegate()
また、なぜ機能するのか、click()
機能しないのか混乱しlive()
ており、要素がDOMでレンダリングされているにもかかわらず機能しますが、それは私が現在探しているものとはまったく異なります。
結論として、この実用的な例で、前述のループを介して関数を呼び出す方法は次のとおりです。
$('.panels h3').each(function()
{
accordionUpDown($(this), false);
});
このクリックベースの例は機能しませんが、機能するはずですが機能しません。
$('.panels h3').live('click',function()
{
accordionUpDown($(this), true);
});
また、ここで参照するために、関数自体があります。
function accordionUpDown(theElem, fx)
{
//alert('test'+theElem);
if(theElem.hasClass('active'))
{
var $elem = theElem.next('div');
var elemY = ($elem.children('div').innerHeight()+2);
if(fx == false)
{
$elem.addClass('active').css({height:elemY+'px'});
}
else
{
$elem.addClass('active').animate({height:elemY+'px'}, 2000);
}
}
if(!theElem.hasClass('active'))
{
var $elem = theElem.next('div');
var elemY = '0px';
if(fx == false)
{
$elem.css({height:elemY}).removeClass('active');
}
else
{
$elem.animate({height:elemY}, 2000).removeClass('active');
}
}
}
時間を節約するために、同じ効果を得るためにjQuery UIのようなものを使用しないのはなぜかと尋ねます。適切に配置されたら、スタイリングの問題と、計画されている他の機能を追加してください。いずれにせよ、カスタムニーズは簡単な概念を超えています。
とにかく、クリックの場合、私$(this)
はどういうわけか間違ったものを拾っているのかどうか疑問に思い始めています、そしてもしそうなら、それはおそらくそれが期待どおりに機能していないので、その場合、私はどのように私を理解しようとしていますどの要素$(this)
が実際にあるかを見つけることができます
クイック編集、すべてを見たい人のために、私はフィドルバージョンを作成しました。 http://jsfiddle.net/sDeq2/HTML部分も含まれています