0

tooltipster プラグインを使用してツールチップを作成しています。

ツール ヒントが表示されているときに、背景 (ピンク色) をクリックすると、data-post-id='xx'その ID が閉じられたことを警告します ( functionAfter)。正しいIDを表示しています。

ただし、背景 (ピンク) をクリックする代わりに、他のヒントをクリックすると、間違った ID が表示されます。これを引き起こしている原因と修正方法を教えてください。

デモを参照してください: http://jsfiddle.net/ww60y38h/

$(".tip").tooltipster({
        content: 'Loading...',
        contentAsHTML: true,
        offsetY: -13,
        autoClose: true,
        theme: 'tooltipster-punk',
        trigger: "click",
        onlyOne: true,
        multiple: false,
        interactive: true,
        functionBefore: function(origin, continueTooltip) {
            continueTooltip();
            postID = $(this).data('post-id');
            origin.tooltipster('content', "Post ID: " + postID);
        },
        functionAfter: function(origin) {
            alert("PostID Tooltip Closed:" + postID);
        }

});

HTML:

<div style="height: 900px; background-color:pink">
  <div class="tip" data-post-id='1'>ToolTip PostID 1</div>
  <div class="tip" data-post-id='2'>ToolTip PostID 2</div>
  <div class="tip" data-post-id='3'>ToolTip PostID 3</div>
</div>
4

1 に答える 1

1

すべてのツールチップに単一のグローバル変数を使用しないでくださいpostID。ツールチップが開くたびに上書きされます。varキーワード beforeを functionBefore に置き、postID同じ方法で functionAfter に定義します。

于 2015-07-09T10:03:02.273 に答える