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');
    });
}