1

jQuery ツールを使用していくつかのツールチップを動的にセットアップしようとしていますが、大きな問題が発生しています。

デフォルトでは、jQuery ツールを使用して最も基本的な形式でツールチップを設定すると、ツールチップ トリガーの次の要素が実際のツールチップとして使用されます。

$("#someElement").tooltip();

私が取り組んでいる現在のアプリケーションでは、次の要素ではないツールチップをロードする必要があるリンクがあります。

jQuery ツールを使用すると、以下を使用してこれを行うことができます。

$("#someElement").tooltip({tip: '#tooltipElement'});

これは素晴らしいことですが、チップを動的に設定できるようにする必要がありますが、それはできないようです。

アプリケーションでは、次のようなリンク設定があります。

<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-1">Quick Preview</a>
<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-2">Quick Preview</a>
<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-3">Quick Preview</a>...

ツールチップは、次のようにページの下部に表示されます。

<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>...

それで、私がこの仕事をするためにやろうとしたことは次のとおりです。

$(".tooltip-preview").tooltip({tip: $(this).attr("data-tooltip-id")});

$(this) が $(".tooltip-preview") オブジェクトとして使用されていないため、これは機能しないと感じています。この場合、どうすればそれを機能させることができますか?

代わりに、各リンクの次の要素がツールチップとして使用されます。

4

1 に答える 1

1

これは私のために働いた：

$(".tooltip-preview").each(function(){
    $(this).tooltip({tip: $(this).attr("data-tooltip-id")});            
});

この回答は、このブロックで次のことを前提としています。

<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>...

あなたはこれを意味しました（ここではid値の増分が重要なポイントです。ランダムなコンテンツも区別していることに注意してください）：

<div id="tooltip-1">Some random content here! (1)</div>
<div id="tooltip-2">Some random content here! (2)</div>
<div id="tooltip-3">Some random content here! (3)</div>...

問題を再現することができ、最初に試しました：

$(".tooltip-preview").tooltip({tip: $(".tooltip-preview").attr("data-tooltip-id")});

それはあなたを近づけますが、そのセレクターは属性「data-tooltip-id」を持つ最初の要素のみを見つけるため、3つのツールチップすべてが「ここにランダムなコンテンツがあります! (1)」になります。

したがって、上記のように要素を反復処理する必要があります。

于 2012-08-16T18:40:20.397 に答える