嘿,我使用的是一个名为qTip的Jquery插件,可以在一堆缩略图上创建图像翻转效果。我需要得到正在翻转的图像标记的src,而我很难找到这样的例子。我认为$(this).src
会起作用,但它引用工具提示而不是图像。有什么想法吗?
答案 0 :(得分: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()。
答案 1 :(得分: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" />'
});
您可以通过在img
下查找当前元素的.qtip-content
来找到它。
如果您将代码发布到获得$(this)的位置,我们可以通过具体细节为您提供更多帮助。
一个例子(没有看到你的代码)将是:
var mysrc = $(this).find('.qtip-content img').eq(0).prop('src');