javascript - 单击事件被激活时引用了错误的对象

Question

我正在尝试为文档创建 Accordion 效果，当您单击 <h1> 时文档的其余部分(<div.container>)带有上下滑动的开关。但是，我一直遇到问题。这是代码:

HTML

<article>
    <h1>Title</h1>
    <div class="container">
        //...
    </div>
</article>

<article>
    //...
</article>

<article>
    //...
</article>

CoffeeScript :

articles = $('article').toArray()

for article in articles
    #console.log $('.container', article).parent().attr('id')
    $('h1', article).click ->
        $('.container', article).slideToggle 'slow'

当我使用 article变量说... console.log它循环浏览文章并打印回它们的 ID。但是当我去点击任何 <h1>元素，它总是折叠最后一个 <article> s <div.container> .

我认为这是因为 article变量存储在 for 范围之外在 CoffeeScript 中循环，直到循环完成后才会执行点击。

如果这是真的，我如何保证在执行点击事件时引用了正确的对象？只使用 for i in [0...3] 会更好吗？循环并直接引用数组？问题完全是另外一回事吗？感谢您的帮助!

对于那些可能不熟悉 coffeeScript 的人，这里是编译的 javaScript(忽略 _results 变量):

var articles
articles = $('article').toArray();
_results = [];

for (_i = 0, _len = articles.length; _i < _len; _i++) {
  article = articles[_i];
  _results.push($('h1', article).click(function() {
    return $('.container', article).slideToggle('slow');
  }));
}

Answer 1

您看到此行为的原因是因为在触发处理程序之前不会评估 click 事件中引用的 article，并且在那个时间点，它设置为在循环中评估的最后一篇文章。

这对你来说可能会更好一些(抱歉，不确定 CoffeeScript 的实现):

$('article h1').click(function() {
    $(this).next('.container').slideToggle('slow');
});