1

我看到了很多例子并试图效仿，但没有一个能奏效。所以我终于把它们贴在这里了。我无法理解我做错了什么。

有一个常见问题解答列表，其中包含答案的显示/隐藏功能。

这是我没有应用闭包的代码（这当然只针对最后一个问题）

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

第一个示例的问题是当事件触发时 i 具有循环中的最后一个值。

第二个与我认为没有 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/这是很棒的学习材料！其中一个例子就是这个问题。

于 2012-08-15T18:35:53.163 回答