我正在尝试为文档创建 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');
}));
}
最佳答案
您看到此行为的原因是因为在触发处理程序之前不会评估 click
事件中引用的 article
,并且在那个时间点,它设置为在循环中评估的最后一篇文章。
这对你来说可能会更好一些(抱歉,不确定 CoffeeScript 的实现):
$('article h1').click(function() {
$(this).next('.container').slideToggle('slow');
});
关于javascript - 单击事件被激活时引用了错误的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7574725/