$("#id").tooltip({
effect: "slide",
tip: '.tooltip'
});
我想删除这段代码创建的对象。
“flowplayer jquery 工具”插件
这个问题在我帖子的底部有一个答案!
如果你不想浪费时间，请看底部
.
------------更新------------
应该是这样的
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>jQuery tooltip</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script type="text/javascript">
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/
$(document).ready(function() {
$("#_2").tooltip({
effect: "slide",
tip: '.tooltip' ,
position: 'bottom center'
});
});
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/
/** The code below is not working as I expect, it doesn't MOVE tooltip **/
var old_id;
//first time - create tooltip
function my_create(id){
$("#"+id).tooltip({
effect: "slide",
tip: '.tooltip',
position: 'bottom center'
});
}
//next times - move tooltip to other element
function my_unlink(id){
$("#"+id).unbind("mouseover");
//todo
}
function my_link(id){
//todo
}
//THE MAIN FUNCTION
function do_tip(new_id){
if(old_id){
my_unlink(old_id);
my_link(new_id);
alert(new_id);
}
else
my_create(new_id);
old_id=new_id;
//new_id.focus();
}
</script>
<style>
.tooltip {
display: none;
background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
font-size:14px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
h1 {
width: 400px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<h1 onclick="do_tip(this.id)" id="_1">John</h1>
<h1 onclick="do_tip(this.id)" id="_2">Mary</h1>
<h1 onclick="do_tip(this.id)" id="_3">Dan</h1>
<h1 onclick="do_tip(this.id)" id="_4">Paul</h1>
<h1 onclick="do_tip(this.id)" id="_5">Kim</h1>
<div class="tooltip">There should be only one tooltip on a page!</div>
</body></html>
.
--------更新 2------------
答案在这里
Linking/unlinking jquery object to an element
这个长篇故事的寓意是:
我一直认为这是一个常见的问题，而不是特定于代码或插件的问题。我认为解决方案应该像“销毁旧的工具提示对象然后创建一个新的对象，附加到其他元素”一样简单
最佳答案
您写道您要删除代码创建的对象。
代码的作用是首先在您的页面中搜索 ID 为“ID”的元素， 让我们称之为“触发器”。
我在这里的代码中改变了一件事:而不是通过 id 'ID' 选择触发器 我选择使用“do_tooltip_for_this”类。这样我就可以为 一次触发多个。
如果用户将鼠标移到触发器上，一个类为“tooltip”的元素，即 已经出现在页面中，将显示并定位在该触发器附近。 如果用户将鼠标移离触发器，该元素将再次自动隐藏。 这也适用于多个触发器，重复使用相同的工具提示。
你也可以通过手写隐藏工具提示
$('.tooltip').hide();
您可以通过编写来禁用整个行为
$(".do_tooltip_for_this").unbind("mouseover");
完整代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>jQuery tooltip</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script type="text/javascript">
var o;
$(document).ready(function() {
o = $(".do_tooltip_for_this").tooltip({
effect: "slide",
tip: '.tooltip' ,
position: 'bottom center'
});
});
</script>
<style>
.tooltip {
display: none;
background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
h1 {
width: 400px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<h1 title="a tooltip regarding John" class="do_tooltip_for_this">This is John</h1>
<h1 title="a tooltip regarding Paul" class="do_tooltip_for_this">This is Paul</h1>
<h1 title="a tooltip regarding George" class="do_tooltip_for_this">This is George</h1>
<h1 title="a tooltip regarding Ringo" class="do_tooltip_for_this">This is Ringo</h1>
<div class="tooltip"></div>
</body></html>
关于javascript - 如何在运行时删除 jquery 对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2117355/