这是我的设计
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>FormBubble Examples</title>
<link href="stylesheets/formbubble.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.formbubble.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#foobar1').hover(function () { //hover
$(this).formBubble({
closeButton: false
});
$.fn.formBubble.text('hover hover hover hover');
}, function () { //mouse out
var thisBubble = $.fn.formBubble.bubbleObject;
$.fn.formBubble.close(thisBubble);
});
$('#foobar2').hover(function () { //hover
$(this).formBubble({
closeButton: false
});
$.fn.formBubble.text('Hello');
}, function () { //mouse out
var thisBubble = $.fn.formBubble.bubbleObject;
$.fn.formBubble.close(thisBubble);
});
});
</script>
</head>
<body>
<div style="width: 220px; margin: auto;">
<p>
<a href="#" id="foobar1">Static Text (Hover)</a>
</p>
<p>
<a href="#" id="foobar2">HTML-based AJAX (Click)</a>
</p>
</div>
</body>
</html>
如果您看到我正在为每个 ID 编写多个函数。相反，我可以拥有一个函数并显示所需的工具提示
最佳答案
我不熟悉 formbubble 插件，但您应该能够按类而不是单个 id 附加事件。试试这个:
<p>
<a href="#" id="foobar1" class="formbubble">Static Text (Hover)</a>
</p>
<p>
<a href="#" id="foobar2" class="formbubble">HTML-based AJAX (Click)</a>
</p>
$('.formbubble').hover(
function () { //hover
$(this).formBubble({ closeButton: false });
$.fn.formBubble.text('hover hover hover hover');
},
function () { //mouse out
var thisBubble = $.fn.formBubble.bubbleObject;
$.fn.formBubble.close(thisBubble);
}
);
关于jquery - 显示工具提示而不是编写多个 jquery 函数的替代方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10653286/