jquery - Twipsy 数据触发属性和 JQuery 怪异

Question

我无法让 Twipsy 读取启用 Twipsy 的元素上设置的数据属性。

我有一个<input...>设置以下属性的控件:

rel="twipsy"
data-trigger="focus"

<head...>元素包含以下 JS 脚本:

$(document).ready(function () {
    $(function () {
        $('[rel=twipsy]').twipsy({ live: true });
    });
});

执行时，Twipsy 由 mouseenter 和 mouseleave 事件触发，而不是 focus 和 blur，如下所示documentation建议。

所以我将页面上的 JS 脚本更改为:

$(document).ready(function () {
    $(function () {
        $('[rel=twipsy]').twipsy({ live: true, trigger: ($(this).attr('data-trigger') == 'focus' ? 'focus' : 'hover') });
    });
});

相同的结果。虽然我已经使用 Prototype 很长时间了，但我大约一周前才开始使用 JQuery，所以完全有可能(好吧 - 很有可能)我根本不明白 JQuery 如何处理集合、枚举和 这个。

$(document).ready(function () {
    $(function () {
        $('[rel=twipsy]').each(function () {
            var trigger = $(this).attr('data-trigger')
            $(this).twipsy({ live: true, trigger: (trigger == 'focus' ? 'focus' : 'hover') })
        });
    });
});

这按预期工作。

所以我的问题是:在前两个例子中我做错了什么？为什么元素的 data-trigger 属性没有被识别？第二个示例中的 JS 脚本出了什么问题？

Answer 1

第二种情况:

$(document).ready(function () {
    $(function () {
        $('[rel=twipsy]').twipsy({ live: true, trigger: ($(this).attr('data-trigger') == 'focus' ? 'focus' : 'hover') });
    });
});

您在匿名函数中使用了 $(this)，它指向 document 对象。您通过将“工作”放入 .each() 中来修复此问题，其中 jQuery 足够友善地将 this 的上下文设置为您所期望的目标。 jsFiddle

您的最终解决方案已经非常优化。您要求根据与其属性相关的某些逻辑，对匹配集中的每个元素采取不同的操作，因此您将必须以某种方式迭代所有这些元素。我要做的唯一更改是:

$(document).ready(function () {
        $('[rel=twipsy]').each(function () {
            var trigger = $(this).attr('data-trigger') === 'focus' ? 'focus' : 'hover')
            $(this).twipsy({ live: true, trigger: trigger })
        });
});

• 检查严格相等时始终使用 Triple =
• 该自执行匿名函数是多余的
• 就我个人而言，如果要使用三元作为开关盒，我会在保存时这样做变量。