Question

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

我有<input...>控件，其中设置了以下属性：

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

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

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

执行时，Twipsy由 mouseenter 和 mouseleave 事件触发，而非焦点和 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对象。你通过将“work”放在.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 =
的自执行匿名函数是多余的
我是个人要使用三元组作为开关盒，我会在保存时使用变量

Answer 2

Twipsy很奇怪，我会给你那个......但是甚至没有深入研究这个问题，我必须指出一件事，为了你的缘故，以及任何发生在这个帖子上的人......

$(document).ready(function () {

和

$(function () {

是同样的事！随着..

jQuery(function () {和jQuery(document).ready(function () { 和他们所有的怪异的朋友..但是，“它”已经足够糟糕了......不要用它杀死它两次，哈哈。我敢肯定，不能帮助你任何... Javascript是非常肛门。即使是一个小小的错误也会让任何工作变得糟糕。如果有疑问，请回过头来看看一切都是因为愚蠢（而不是那么愚蠢）的错误。

Twipsy数据触发器属性和JQuery怪异

2 个答案: