jquery - qTip 参考图像元素

Question

嘿，我正在使用一个名为 qTip 的 Jquery 插件在一堆缩略图上创建图像翻转效果。我需要获取正在翻转的图像标签的 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，并且根据您的需要，您可能希望将 .attr() 替换为 .prop()。

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

您可以通过在img下方.qtip-content查找当前元素来找到它。

如果您将代码发布到您获得 $(this) 的位置，我们可以在细节方面为您提供更多帮助。

一个例子（没有看到你的代码）是：

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