jquery - qTip参照画像要素

Question

こんにちは、qTip という Jquery プラグインを使用して、一連のサムネイルに画像のロールオーバー効果を作成しています。ロールオーバーされているイメージ タグの src を取得する必要がありますが、この例を見つけるのに苦労しています。うまくいくと思いました$(this).srcが、画像ではなくツールチップを参照しています。何か案は？

Answer 1

問題は...いつソースを取得しようとしているのか、HTML と qTip の初期化設定はどうなっているのですか? どのバージョンの qTip と jQuery を使用していますか? これらの質問に対する答えは、あなたがやりたいことをどのように行うかを決定します。qTip2を使用していると仮定します。

$.each() ループを介して初期化すると、 $(this) の意味がターゲットを参照するように変更され、おそらく探しているものです。ただし、イベント コールバック内では、おそらく API を使用する必要があることに注意してください。

$(document).ready(function()
{
    $('img.thumbnail').each(function() {
        $(this).qtip({
            // within an $.each() loop, $(this) refers to the trigger/target
            content: $(this).attr('src'),
            events: {
                show: function(event, api) {
                    // To reference the original trigger, use the
                    // API's elements property to get a reference
                    // to the trigger
                    alert(api.elements.target.attr('src'));
                }
            }
        });
    });
});

レンダリングされた qTip 内で何かを見つけたい場合は、API を使用することもできます。これは、ツールチップのほぼすべての部分に対するオブジェクト参照があるためです。例えば：

 api.elements.content.find('img').attr('src');

レンダリングされたツールチップ自体内の画像のすべての src 属性を返します。

詳細については、ドキュメントを参照してください。

http://craigsworks.com/projects/qtip2/docs/api/#elements

上記の jsFiddle.net での実際の例を次に示します。

http://jsfiddle.net/kiddailey/AAaUk/

jQuery 1.6 を使用していて、必要に応じて、.attr() を .prop() に置き換えたい場合があることに注意してください。

Answer 2

qTipは次のdivレイアウトを使用します。

<div class="qtip qtip-stylename">
   <div class="qtip-tip" rel="cornerValue"></div>
   <div class="qtip-wrapper">
      <div class="qtip-borderTop"></div> // Only present when using rounded corners
      <div class="qtip-contentWrapper">
         <div class="qtip-title"> // All CSS styles...
            <div class="qtip-button"></div> // ...are usually applied...
         </div>
         <div class="qtip-content"></div> // ...to these three elements!
      </div>
      <div class="qtip-borderBottom"></div> // Only present when using rounded corners
   </div>
</div>

あなたがimgを入れるときの意味：

 $('#content a[href]').qtip({
      // Simply use an HTML img tag within the HTML string
      content: '<img src="/projects/qtip/images/owl_small.png" alt="Owl" />'
   });

現在の要素のimg下を探すことで見つけることができます。.qtip-content

$（this）を取得している場所にコードを投稿すると、詳細についてもう少しお手伝いできます。

例（コードを見ないで）は次のようになります：

var mysrc = $(this).find('.qtip-content img').eq(0).prop('src');