1

这是我的设计

 <%@ 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 编写多个函数。取而代之的是，我可以拥有一个功能并显示所需的工具提示

4

3 回答 3

2

我不熟悉该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);
    }
);
于 2012-05-18T13:15:08.320 回答
1

这是类存在的原因之一。

$('.tooltip').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);
});

然后，您只需为每个元素提供该类的工具提示。

<p>
    <a href="#" id="foobar1" class="tooltip">Static Text (Hover)</a>
</p>
<p>
    <a href="#" id="foobar2" class="tooltip">HTML-based AJAX (Click)</a>
</p>
于 2012-05-18T13:15:04.030 回答
0 
$("[title]").hover(function(){
            $(this).formBubble({
                closeButton: false
            });
            $.fn.formBubble.text('hover hover hover hover');
},function () { //mouse out
            var thisBubble = $.fn.formBubble.bubbleObject;

            $.fn.formBubble.close(thisBubble);
        });
于 2012-05-18T13:14:45.810 回答