1

多くの例を見て、従おうとしましたが、どれもうまくいきませんでした。だから私は最終的にここにそれらを掲載しています。私は自分が間違っていることを理解できません。

FAQの質問/回答の一覧があり、回答の表示/非表示機能があります。

これがクロージャーを適用しない私のコードです（これはもちろん最後の質問のみを対象としています）

for(var i = 1; i <= faqCount; i++) {
    question = '#' + i + ' .faq_question';
    answer = '#' + i + ' .faq_answer';
    $(question).click(function () {
        $(answer).toggle();
        $(question).toggleClass('down');
    });
}

しかし、他の例を見ると、私はこれをやろうとしましたが、うまくいきませんでした:

var funcs = [];
function createfunc(i) {
    return function() {
        question = '#' + i + ' .faq_question';
        answer = '#' + i + ' .faq_answer';
        $(question).click(function () {
            $(answer).toggle();
            $(question).toggleClass('down');
        }); 
    };
}   
for (var i = 0; i < faqCount; i++) {
    funcs[i] = createfunc(i);
}
for (var j = 1; j < faqCount; j++) {
    funcs[j]();                        
}

どんな助けでも大歓迎です。ありがとうございました。

4

3 に答える 3

3

クロージャーを使用してこれにアプローチするには、いくつかの方法があります。自己実行関数を使用するこの方法が、最も覚えやすい方法だと思います。質問はすぐに実行され$(this)、イベント ハンドラー内で使用できるため、回答文字列のみをクロージャーに含める必要があります。自己実行関数を使用したクロージャーは次のとおりです。

for(var i = 1; i <= faqCount; i++) {
    (function(a) {
        $('#' + i + ' .faq_question').click(function () {
            $(a).toggle();
            $(this).toggleClass('down');
        });
    })('#' + i + ' .faq_answer');
}

私が時々見つける非クロージャの方法は、より読みやすいコードを作成し、インデックスを質問の .data() アイテムとして保存し、次のように機能します。

for(var i = 1; i <= faqCount; i++) {
    $('#' + i + ' .faq_question').data("answerIndex", i).click(function () {
        $('#' + $(this).data("answerIndex") + ' .faq_answer').toggle();
        $(this).toggleClass('down');
    });
}
于 2012-08-15T18:31:34.477 に答える
1

クロージャーに追加varする必要がありますquestion。answerそうしないと、毎回グローバル変数を上書きするだけです。

var funcs = [];
function createfunc(i) {
    return function() {
        var question = '#' + i + ' .faq_question';
        var answer = '#' + i + ' .faq_answer';
        $(question).click(function () {
            $(answer).toggle();
            $(question).toggleClass('down');
        }); 
    };
}
于 2012-08-15T18:31:49.453 に答える
0

最初の例の問題は、イベントがトリガーされたときに、ループ内に最後の値があることでした。

2 つ目はグローバル変数に関するもので、var がなかったと思います。

私は次のような閉鎖を使用してそれを解決します:-

これは、ループ内の i の現在の値を使用して関数を呼び出し、それをクロージャーでカプセル化します。

for(var i = 1; i <= faqCount; i++) {
  $(question).click((function(question, answer) {
    return function() {
      $(answer).toggle();
      $(question).toggleClass('down');
    }
  })('#' + i + ' .faq_question', '#' + i + ' .faq_answer' ))
}

素晴らしい学習教材であるhttp://ejohn.org/apps/learn/をチェックすることをお勧めします! 例の1つにこの問題があります。

于 2012-08-15T18:35:53.163 に答える