javascript - jQuery 微醉 : Dynamically update title

Question

根据要求，我想更新现有的醉酒标题，但它似乎不起作用。

情况

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 文档是否完全错误，是版本不兼容还是其他问题导致此示例无法运行？

Answer 1

文档似乎是正确的，并且按照我的理解工作。

.tipsy({title: 'attribute'})

用于查找元素上的属性并从中喝醉。默认为 title 属性。所以对于问题中的例子:

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

这是试图在 #li1 上找到一个名为 FooBar1 的属性，它不存在。 tipsy 将寻找的默认属性是 title 属性。所以你需要这样的东西:

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

或使用自定义属性并在 tipsy 构造函数中指定。

<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') 等等……

但是，以这种方式设置标题只有在您还没有覆盖每个 tipsy 构造函数中的 title 时才有效。因此，在这种情况下，您的代码将仅适用于 li3，因为其他代码具有始终返回 FooBar1 的自定义标题函数。

完整示例:

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

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

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