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'})もまったく機能しないようです。
  • ほろ酔いのドキュメントは、属性を設定することでタイトルの値を更新できることを示唆していますがoriginal-title(セクション「動的にテキストを更新する」を参照)、私の場合はうまくいかないようです (jsfiddle を参照)。

ほろ酔いドキュメントは明らかに間違っていますか、それはバージョンの非互換性ですか、それともこの例が機能しない他の問題ですか?

4

2 に答える 2

3

ドキュメントは正しく、私が理解しているように機能しているようです。

.tipsy({title: 'attribute'})

要素の属性を見つけて、そこからほろ酔いを作るために使用されます。デフォルトはtitleアトリビュートです。したがって、質問の例では：

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

これは、存在しない呼び出された属性を見つけようとしています。ほろ酔いが探すデフォルトの属性はtitle属性です。したがって、次のようなものが必要です。FooBar1#li1

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

titleただし、この方法でのタイトルの設定は、各ほろ酔いコンストラクターでまだオーバーライドしていない場合にのみ機能します。したがって、他のコードには常に FooBar1 を返すカスタムタイトル関数があるため、この場合、コードは li3 でのみ機能します。

完全な例:

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

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

FooBar1を返します。それを呼び出すと、 FooBar2$('#li3')[0].setAttribute('title', '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 に答える