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