激活点击事件时引用了错误的对象

Question

我正在尝试为文档创建手风琴效果，当您单击

文档的其余部分（）时带有向上和向下滑动的切换开关。然而我一直遇到问题。下面是代码：

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。但是，当我点击任何

元素时，它总是会折叠最后一个

的 .

我认为这是因为 article 变量存储在 CoffeeScript 中 for 循环的范围之外，并且只有在循环完成后才会执行单击。

如果这是真的，如何保证在执行单击事件时引用正确的对象？使用 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，并且在该时间点，它被设置为在您的循环中评估的最后一篇文章。

这可能对你来说更好一些（抱歉，不确定咖啡脚本的实现）：

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

Answer 2

罗科的回答是正确的。让我扩展一下：

这是一个常见的混淆领域：只有函数在 JavaScript（和 CoffeeScript）中创建作用域，这意味着当您在循环中异步执行某些操作时，您必须记住“捕获”变量。在 CoffeeScript 中执行此操作的首选方法是使用 do 语法，它允许您将

for article in articles
  do (article) ->
    $('h1', article).click ->
      $('.container', article).slideToggle 'slow'

其编译为等效的

for article in articles
  ((article) ->
    $('h1', article).click ->
      $('.container', article).slideToggle 'slow'
  )(article)

那种方式，每个 click 回调都会看到它自己的 click 迭代。 code>article，而不是在循环过程中改变值的那个。我在 PragPub 文章 A CoffeeScript Intervention 中简要讨论了这一点。

Answer 3

这是另一种方法（在 javascript/jQuery 中）：

1. 修改初始选择器以选择文章下的所有 h1 标签
2. 使用 this.parentNode 从单击中获取上下文
3. 然后查找.container 对象。

这样，我们不必在单击过程中存储任何状态，因为我们只需找到与单击的项目共享相同父级的容器。此方法也不依赖于容器对象相对于单击的 h1 的确切位置 - 它只需要容器共享相同的父级，以便在将来的布局中更加灵活。

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

Answer 4

我对 Coffeescript 一无所知，但编译后的 Javascript 有一个非常明显的错误。

这一行：

article = articles[_i];

应该这样读：

var article = articles[_i];

通过此更改，article 变量将被视为调用范围的一部分，并在调用处理程序时引用适当的元素（而不是引用隐式全局变量）。这就是修复错误所需的全部内容。

希望有一种方法可以在 Coffeescript 中指定这一点，但似乎非常可怕，对于文章中的文章 不会自动执行此操作。