嘿,我是一个使用jQuery插件称为qTip创建一堆缩略图的图像翻转效果。我需要获取正在翻转的图像标签的src,并且我很难找到此示例。我认为$(this).src
可以工作,但是它引用了工具提示而不是图像。有任何想法吗?qTip参考图像元素
0
A
回答
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
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');
相关问题
- 1. VB.net - 元素参考
- 2. AXObserverCallback元素参考
- 3. Eclipse参考图像
- 4. 畸形的参考元素
- 5. 参考硒元素中JavaScriptExecutor
- 6. 获取元素的参考
- 7. Xcode png图像参考
- 8. IRandomAccessStream参考图像源
- 9. ImageResizer disposing provided图像参考
- 10. 图像处理基于参考英寸获取每英寸像素的像素
- 11. 将XY参考转换为像素参考
- 12. 获取元素参考而不使用反应中的参考
- 13. 的Python - 参考最后一个元素
- 14. StaleElementReferenceException:陈旧的元素参考:
- 15. 陈旧元素参考错误
- 16. 参考表单元素使用javascript
- 17. 获取参考<script>父元素
- 18. 每个live555元素的undefined参考
- 19. 回到STL容器元素的参考
- 20. XML元素参考a兄弟
- 21. 在JS参考HTML元素的对象
- 22. 陈旧元素参考错误?
- 23. jQuery的动态添加元素qtip
- 24. 用qTip操纵原始元素
- 25. 参考由元
- 26. MATLAB:图像角坐标和单元阵列的参考
- 27. 如何参考图像中的ControlTemplate
- 28. Xamarin-Forms | Android - GroundOverlayOptions中的参考图像
- 29. 填充DIV与参考图像
- 30. 我如何显示图像的参考?
完美的工作。谢谢! – 2011-05-14 01:40:37