qTip參考圖像元素

Question

嘿，我是一個使用jQuery插件稱爲qTip創建一堆縮略圖的圖像翻轉效果。我需要獲取正在翻轉的圖像標籤的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並根據您的需要，您可能想用.prop（）替換.attr（）。

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" />' 
    }); 

您可以通過.qtip-content下尋找img您當前元素找到它。

如果您將您的代碼發佈到$（this）的位置，我們可以幫助您瞭解更多具體細節。

一個例子（沒有看到您的代碼）將是：

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