javascript-jQuery Tipsy：动态更新标题

按照要求,我想更新一个现有的小标题,但似乎不起作用.

情况

HTML：

<ul>
    <li id="li1">Point at me (title -> value)</li>
    <li id="li2">Point at me (title -> callback)</li>
    <li id="li3" original-title="FooBar1">Point at me (title -> html attribute)</li>
</ul>

<button>Click me to update</button>​

JS：

$('#li1').tipsy({
    title: 'FooBar1'
});
$('#li2').tipsy({
    title: function() { return 'FooBar1'; }
});
$('#li3').tipsy();
$('button').click(function() {
    alert('Updating tipsy titles');

    // Try setting title attribute
    $('li1')[0].setAttribute('title', 'FooBar2');
    $('li2')[0].setAttribute('title', 'FooBar2');
    $('li3')[0].setAttribute('title', 'FooBar2');

    // Try setting original-title attribute
    $('li1')[0].setAttribute('original-title', 'FooBar2');
    $('li2')[0].setAttribute('original-title', 'FooBar2');
    $('li3')[0].setAttribute('original-title', 'FooBar2');
});

您可以在jsFiddle中玩这个：http://jsfiddle.net/TvFmG/3/

问题

我遇到以下问题：

>通过Tipsy({title：’string’})设置标题似乎根本不起作用.
> tipsy docs建议可以通过设置original-title属性来更新标题值(请参阅“动态更新文本”部分),但在我看来似乎不起作用(请参阅jsfiddle).

棘手的文档是否纯属错误,是否存在某些版本不兼容或其他导致该示例无法正常工作的问题？

解决方法:

据我所知,该文档似乎是正确的并且可以正常工作.

.tipsy({title: 'attribute'})

用于查找元素上的属性,并从中进行细化.默认值为标题属性.因此,对于问题中的示例：

$('#li1').tipsy({
    title: 'FooBar1'
});

这试图在#li1上找到一个名为FooBar1的属性,该属性不存在. Tipsy将寻找的默认属性是title属性.因此,您需要类似：

<li id="li1" title="hooray!">Point at me (title -> value)</li>

或使用自定义属性,并在小巧的构造函数中指定该属性.

<li id="li1" FooBar1="title from a custom attribute">Point at me (title -> value)</li>

$('#li1').tipsy({
    title: 'FooBar1'
});

对于通过问题的单击部分进行的设置,此行上的JavaScript中有一个错误(尽管出于相同的原因,下一行也会发生相同的错误).

$('li1')[0].setAttribute('title', 'FooBar2');

选择器缺少开头的#,因此jQuery找不到您的元素.应该是$(‘#li1’),$(‘#li2’)等…

但是,只有在尚未覆盖每个常用构造函数中的标题的情况下,以这种方式设置标题才有效.因此,在这种情况下,您的代码只能与li3一起使用,因为其他代码具有自定义标题函数,该函数始终返回FooBar1.

完整示例：

<li id="li3" original-title="FooBar1">Point at me (title -> html attribute)</li>

$('#li3').tipsy();

将返回FooBar1.然后调用$(‘#li3’)[0] .setAttribute(‘title’,’FooBar2′);它将返回FooBar2.