JavaScript关闭onclick

Question

我看到了许多例子并尝试遵循，但没有一个能够奏效。所以我终于在这里发帖了。我无法理解我做错了什么。

有一个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]();                        
}

任何帮助将不胜感激。谢谢。

Answer 1

有几种方法可以使用闭包来解决这个问题。我发现这个方法使用自执行函数最容易记住该怎么做。只有答案字符串必须在闭包中，因为问题立即执行，然后您可以在事件处理程序中使用$(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');
    });
}

Answer 2

您需要在封闭内添加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');
        }); 
    };
}  

Answer 3

第一个例子的问题是当事件触发时我在循环中有最后一个值。

第二个问题与全局变量有关，我认为没有看到变量。

我会使用这样的闭包来解决它： -

这使用循环中的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/这是一本很棒的学习资料！ 其中一个例子就是这个问题。