jQuery qtip() - 如何从鼠标悬停中获取 id，.$load()答案

【问题标题】：jQuery qtip() - how to get the id from mouseover, .$load()jQuery qtip() - 如何从鼠标悬停中获取 id，.$load()
【发布时间】：2013-03-06 01:38:07
【问题描述】：

我有 Jquery qtip() 函数，当鼠标悬停在链接上时我需要获取 id。我可以使用 jquery .load() 来获取页面吗？无法使用以下代码。有人知道吗？

下面是我的脚本

$(function () {
      $(".cabinlink").qtip({
content: $("#loadCabin").load("/mysite ." + $(this).attr('id')),

                 show: 'mouseover',
                 hide: 'mouseout',

                 style: {
                     width: 780
                 },
                 position: {
                     corner: {
                         target: 'LeftBottom',
                         tooltip: 'TopLeft'
                     }
                 }
             });
         });

.cabinlink 是鼠标悬停链接

<a id="1" href="javascript:void(0)" class="cabinlink" />
<a id="2" href="javascript:void(0)" class="cabinlink" />
<a id="3" href="javascript:void(0)" class="cabinlink" />

loadCabin是打开qtip框的div

<div id="loadCabin"></div>

修改后的代码，可以工作但需要鼠标悬停两次。第一次鼠标悬停没有结果。有人知道吗？

 $(function () {
         $(".cabinlink").live('mouseover', function () {

             var id = $(this).attr('id');
             var url = "/Mysite ." + id;
             $(this).qtip({
                 overwrite: false,
                 content: $("#loadCabin").load(url),
                 show: { ready: true, when: false },
                 hide: 'mouseout',
                 style: {
                     width: 780
                 },
                 position: {
                     corner: {
                         target: 'LeftBottom',
                         tooltip: 'TopLeft'
                     }
                 }

             });
         });

     });

【问题讨论】：

ID 不能以数字开头。
我不太了解 qtip API 无法回答您的问题，但我可以告诉您，您没有得到您期望的 ID，因为“this”指的是您的选项对象' 传递给 qtip，而不是悬停的元素。我想 qtip 的其中一个选项允许您传递一个回调函数，您对 $(this).attr('id') 的调用将按照您的预期返回元素的 ID。
除此之外，您还需要考虑时间... $(".cabinlink").qtip(...) 在页面加载后立即运行，并告诉它初始化使用给定的选项。之后，悬停事件由 qtip 处理，只有这样你才能知道悬停在哪个元素上。
@Blender 确实最好避免使用以数字开头的 ID（只有 HTML5 允许使用它们，但仍应避免使用它们），但这并不是导致问题的原因
@MattB.: 嗯，我不知道 HTML5 发生了变化。谢谢。

标签： jquery qtip

【解决方案1】：

试试这个：

$(".cabinlink").qtip({
    onShow: function() {
        $("#loadCabin").load("/mysite." + $(this).attr('id'))
    },

     show: 'mouseover',
     hide: 'mouseout',

     style: {
         width: 780
     },
     position: {
         corner: {
             target: 'LeftBottom',
             tooltip: 'TopLeft'
         }
     }
 });

如果这不起作用，其他回调函数之一可能...请参阅http://craigsworks.com/projects/qtip/docs/api/#callbacks

【讨论】：

无法让它在您的代码上运行。我已经修改了上面的代码，它似乎可以这样工作，但现在的问题是这次我需要将鼠标悬停两次。第一个鼠标悬停没有出现任何东西。任何想法
看来您可能需要自己处理 mouseover 事件，然后使用 qtip API 的 updateContent 方法，如下所示：stackoverflow.com/questions/6879907/…。请注意，您需要使用 $.get 或 $.ajax 方法而不是 $.load 才能使用此方法。
其实我觉得你的情况和链接里的不一样；可能有更简单的解决方案，如果我想到了，我会在这里发帖。
忘记我以前的 cmets（你不需要自己的 mouseover() 处理程序）；试试这个：stackoverflow.com/a/2297936/560114（请注意，我链接到一个特定的答案；该问题的接受答案不正确）。