3

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

情况

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）。

醉醺醺的文档是完全错误的，是版本不兼容还是其他问题阻止了这个例子的工作？

4

2 回答 2

3

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

.tipsy({title: 'attribute'})

用于查找元素上的属性并以此为基础。默认值为title属性。因此，对于问题中的示例：

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

这是试图找到一个不存在的属性。Tipsy 将寻找的默认属性是title属性。所以你需要类似的东西：FooBar1#li1

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

但是，以这种方式设置标题仅在您尚未覆盖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。

于 2012-11-02T12:03:10.420 回答
1

试试这个工作小提琴

HTML

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

Javascript代码

  $('#li3').tipsy();
  $('button').click(function() {
      $('#li3').attr('original-title', 'FooBar2');
   });
于 2012-11-02T12:11:10.777 回答