3

我使用 jQuery qTip 插件来显示鼠标悬停链接/img 的 div。我已经写了 2 个选项来使用，但都造成了麻烦。

V1：第一个版本显示工具提示，只是我第二次将鼠标移到链接上。在链接上重复我的鼠标后，脚本似乎越来越慢，在 6/7 次之后，我的浏览器几乎崩溃了......这里有什么问题？

V2：在我的第二个版本中，我尝试以正常方式使用 qTip，但尝试将相关 div 的内容放入 qTip 内容中，但我们没有发生。可能 qTip 插件不接受配置中的函数，对吧？

你能看看这两个脚本并告诉我我做错了什么吗？我不明白了。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Project</title>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script> <!-- http://craigsworks.com/projects/qtip/ -->

    <SCRIPT LANGUAGE="JavaScript">
    jQuery(document).ready(function() {

        // hide all tooltip div's
        $(".tooltip_request").hide();


        // V1 - show qtip layer - THIS ONE GETS VERY SLOW AFTER MOUSEOVER-ING several times??
        $(".editrequest_v1").live('mouseover', function() {
            var request = $(this).attr('id'); // "request1"
            var name_tipdiv = "tooltip"+request;
            var div_content = $("#"+name_tipdiv).html();

            $(this).qtip({
                content: div_content,
                style: 'light',
            });
        });

        // V2 - show qtip layer - this one is not getting slow, but does not show the content
        $(".editrequest_v2").qtip({
            content: function() {
                var request = $(this).attr('id'); // "request1"
                var name_tipdiv = "tooltip"+request;
                var div_content = $("#"+name_tipdiv).html();
                return div_content;
            },
            style: 'light',
        });
    });
    </SCRIPT>
</head>
<body>

    <a href="#" class="editrequest_v1" id="request1">Show tooltip v1/content 1 - get slow and needs 2 times a mouseover before shows tooltip</a><br>
    <a href="#" class="editrequest_v1" id="request2">Show tooltip v1/content 2 -get slow and needs 2 times a mouseover before shows toolti</a>
    <div class="tooltip_request" id="tooltiprequest1">CONTENT Tooltip 1</div>
    <div class="tooltip_request" id="tooltiprequest2">CONTENT Tooltip 2</div><br><br>

    <a href="#" class="editrequest_v2" id="request3">Show tooltip v2/content 3 - does not show content in tip</a><br>
    <a href="#" class="editrequest_v2" id="request4">Show tooltip v2/content 4 - does not show content in tip</a>
    <div class="tooltip_request" id="tooltiprequest3">CONTENT Tooltip 3</div>
    <div class="tooltip_request" id="tooltiprequest4">CONTENT Tooltip 4</div><br><br>

</body>
</html>

非常感谢！

PS 我是 jQuery 的新手——只有 4 周 :-)

4

2 回答 2

4

使用以下

$(".editrequest_v2").each(
  function(){
    $(this).qtip({
      content: $("#tooltip"+$(this).attr('id')).html(),
      style: 'light',
    });
  });

您第一次尝试的错误是您在每次鼠标悬停时都创建了一个新的工具提示。

您的第二次尝试遇到的问题是您使用了不允许的功能..

于 2010-01-25T15:38:48.900 回答
1

尝试使用bind而不是live. 仅当您想将事件绑定到将来使用 AJAX 加载的所有类时才使用 live。

于 2010-01-25T15:34:01.203 回答