0

我正在为我正在开发的网站使用 qTip jquery 插件qTip 插件，该网站基于我在这里提出的另一个线程：堆栈溢出线程

我的问题是，我的屏幕顶部有一个导航栏，它基本上根据您所在的选项卡菜单设置标题属性，这些都存储在一个 javascript 数组中。

例如，我在屏幕顶部运行了三个菜单选项，例如菜单 A、菜单 B 和菜单 C。

我还有一个位于导航栏最右侧位置的信息图像，我根据导航栏中选择的菜单选项设置了标题属性。

例如：

Menu A => myRole[0] = "Admin"
Menu B => myRole[1] = "Manager"
Menu C => myRole[2] = "Guest"

所以基本上当用户点击导航栏中的每个菜单时，我将信息图像中的标题属性设置为“Admin”、“Manager”或“Guest”。

启动时，当我将鼠标悬停在 qTip 插件上时，它会工作并显示“Admin”，但是当我将菜单更改为 Menu C 时，它仍然显示“Admin”而不是“Guest”

从它的外观上看，它似乎没有调用 qTip 插件，我将其定位在屏幕的底部（请参阅下面的实际代码）。

任何想法如何确保每次单击/更改菜单选项并在 javascript 数组中拾取值时触发 qTip？

<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>



<script type="text/javascript"> 
$(document).ready(function()
{
   $('div#infoi img[title]').qtip({
      position: { 
         adjust: { x:-110, y:0 },
         corner: {
            target: 'bottomLeft',
            tooltip: 'topMiddle'
         }
      },
      style: {
        width: 250,
        padding: 5,
        background: '#E7F1FA',
        color: 'black',
        textAlign: 'center',
        border: {
          width: 3,
          color: '#65a9d7'
        },
        tip: 'topRight'
      }
   });
});
</script>

谢谢。

4

1 回答 1

0

如果您的菜单最初出现在页面上，然后您稍后添加其他元素或替换元素，那么您需要重新初始化该元素上的工具提示。

正如您所提到的，您似乎只是根据选择更改侧面部分的文本。您需要同时更改标题，然后重新初始化 qtip 函数，所以我建议您将所有代码放在一个函数中，例如 

var qtipset = 函数（）{
      $('div#infoi img[title]').qtip({
      位置： {
         调整：{ x:-110, y:0 },
         角落： {
            目标：'bottomLeft'，
            工具提示：'topMiddle'
         }
      },
      风格： {
        宽度：250，
        填充：5，
        背景：'#E7F1FA',
        颜色：黑色'，
        textAlign: '居中',
        边界： {
          宽度：3，
          颜色：'#65a9d7'
        },
        提示：“右上角”
      }
   });
     }

在您的 Javascript 中，您在更改图像上的标题属性后使用选定的菜单文本更新图像的标题，也调用此函数qtipset(); ，然后重新读取标题并初始化页面上的 qtip 元素，以便下次悬停时它将能够使用正确的数据调用 qtip 函数。

于 2013-09-18T04:32:59.063 回答