jquery - 使用 Twitter Typeahead.js 访问元素的数据属性

Question

我使用 Rails 生成表单。我想使用 Twitter Typeahead 自动完成具有模型关联的字段。

以下 CoffeeScript 代码：

console.log $('.typeahead').data('source')

工作和回报：

["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

我可以从 typeahead 函数中访问相同的数据吗？以下代码：

$('.typeahead').typeahead(
    name: 'test'
    local: $(this).data('source')
    console.log $(this).data('source'))

不起作用并返回undefined。

score 1 · Accepted Answer

最简单的方法是保存对 jQuery 对象的引用并使用它来代替this：

$input = $ '.typeahead'
$input.typeahead
    name: 'test'
    local: $input.data 'source'

问题是$(this).data('source')在传递给.typeahead(). 此时，this仍设置为全局范围，其中没有附加任何数据。

即使您有多个.typeahead元素也可以使用的另一个选项是手动调用.each()而不是依赖于.typeahead()迭代所选元素本身：

$('.typeahead').each ->
    $(this).typeahead
        name: 'test'
        local: $(this).data 'source'

这是有效的，因为传递给的函数.each()是“在当前 DOM 元素的上下文中触发的，因此关键字this指的是元素”（请参阅文档）。

1 回答 1