2011-05-12 80 views
0

嘿,我是一个使用jQuery插件称为qTip创建一堆缩略图的图像翻转效果。我需要获取正在翻转的图像标签的src,并且我很难找到此示例。我认为$(this).src可以工作,但是它引用了工具提示而不是图像。有任何想法吗?qTip参考图像元素

回答

3

问题是...当你试图获取来源,以及如何为你的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()。

+0

完美的工作。谢谢! – 2011-05-14 01:40:37

0

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

我认为原始海报是要求获取工具提示目标/触发器本身的src,而不是来自工具提示内容的东西;) – kiddailey 2011-05-13 09:40:42

+0

@kiddailey希望该操作可以发布违规代码 - 我打赌我是完全的离碱。我认为你的答案更接近这个意图(希望)。 – WSkid 2011-05-13 09:42:47

+0

是的,如果没有很多细节和一些示例代码,很难回答这些问题。 – kiddailey 2011-05-14 06:38:27