jQuery的动态qtip节目格，但得到慢每鼠标悬停 [英] jQuery dynamic qtip shows div, but gets slower and slower with every mouseover
问题描述
我使用jQuery qTip插件显示的div的鼠标悬停链接/ IMG。 我已经写了2个选项使用，但两者都造成麻烦。
I use jQuery qTip plugin to show divs for a mouseover link/img. I have wrote 2 options to use, but both are causing troubles.
V1：第一个版本显示工具提示，仅仅是第二次将我的鼠标在链接上。重复我的鼠标在链接上之后脚本似乎变得越来越慢后6/7时间我的浏览器几乎崩溃...有什么问题吗？
V1: the first version shows the tooltip, only the second time I move my mouse over the link. After repeating my mouse over the link the script seems to get slower and slower and after 6/7 times my browser is almost crashing... What is the problem here?
V2：在我的第二个版本，我尝试使用qTip正常的方式，而是尽量把相关div的内容放入qTip的内容，但我们没有发生。也许qTip插件不接受里面的配置功能，对吧？
V2: in my second version I try to use qTip the normal way, but is try to put the content of the related div into the qTip content, but that us not happening. Probably the qTip plugin does not accept functions inside the configuration, right?
你可以看一下这两个脚本，并告诉我，我做错了吗？我不明白了。
Can you look to these 2 script and tell me what I'm doing wrong? I don't understand anymore.
<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>
很多的感谢！
A lot of thanks!
P.S。我是一个新手，jQuery的 - 4周内： - ）
P.S. I'm a newbie to jQuery - just 4 weeks :-)
推荐答案
使用以下
$(".editrequest_v2").each(
function(){
$(this).qtip({
content: $("#tooltip"+$(this).attr('id')).html(),
style: 'light',
});
});
这是你创建的每个鼠标悬停一个新的工具提示在你的第一次尝试错误是..
The error in your first attempt was that you created a new tooltip on each mouseover..
您的第二次尝试过，你用它是不允许的函数问题。
Your second try had the problem that you use a function where it was not allowed ..
这篇关于jQuery的动态qtip节目格，但得到慢每鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
