1

問題: ユーザーが赤い四角をダブルクリックするまで、要素は「最大化」されません。

基本的に、「クリックされた」変数は、事前にインスタンス化されるのではなく、onClick でインスタンス化されます。結果として、ユーザーは 'clicked' 変数をインスタンス化するために 1 回クリックする必要があり、関数は目的どおりに機能します。

ここにJSFiddleがあります

コードの重要なセクション:

var container = $(this).parents('.container');
var paragraph = $(container).find('.text');
if (this.clicked == 0) {
    container.removeClass("large-4");
    container.addClass("large-8");
    paragraph.removeClass("hide");
    this.clicked = 1;
}

どんな助けでも感謝します！

詳細 (読む必要はありません:D):

この逆の選択 (子要素を選択してから親要素を選択する) を行っている理由は、これらの「.container」要素が多数あり、それぞれが同じ最小/最大機能を持つ必要があるためです。最小最大アイコン。

明らかに、メソッドは単一のローカル「クリックされた」クラス変数を参照していません。各要素には独自の「クリックされた」変数が必要なため、これは意味がありません。

これを行うためのより良い方法があれば、私は何でも受け入れますが、それでも、Jquery の全体的な理解に役立つため、この特定の問題を理解することは素晴らしいことです。

クラス名に精通している人のために、このプロジェクトで Foundation のフレームワークを使用しています。

これは閉鎖と関係があるという奇妙な感覚がありますが、そうです... JSまたはJQueryについて、これを実際に理解するのに十分な知識がありません。

4

2 に答える 2

1

jQuery では、イベント ハンドラーthisは、イベントをトリガーしたオブジェクトを参照します。したがって、クリック コールバックでthisは、Artist のインスタンスを参照しなくなります。これを回避するには、変数thatを作成して Artist インスタンスに設定します。javascript クロージャーのおかげで、インスタンスを参照しthatたり、アクセスしたりできます。

ワーキングデモ

Artist.clickHandler = function () {
    var that = this;
    //this.clicked is undefined until the event is actually fired
    that.clicked = 0;
    $('.minmax').click(function () {
        if (typeof that.clicked === 'undefined') {
            console.log("that.clicked is undefined");
        } else {
            console.log("that.clicked is defined");
        }
        //rest of handler here
    });
};
于 2013-08-13T00:00:31.173 に答える