Question

这是我的设计

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

Answer 1

我不熟悉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);
    }
);

Answer 2

这是课程存在的原因之一。

$('.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>

Answer 3

$("[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);
        });

任何显示工具提示的替代方式，而不是编写多个jquery函数

3 个答案: