顯示工具提示，而不是寫多個jQuery函數

的任何替代方法這是我設計的顯示工具提示，而不是寫多個jQuery函數

<%@ 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。而不是我可以有一個單一的功能，並顯示所需的工具提示

來源

2012-05-18 Vivekh

嘗試選擇所有鏈接一次，可能使用通用類爲您的選擇 –

我不熟悉的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-18 13:15:08

$("[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-18 13:14:45

這是類存在的原因之一。

$('.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-18 13:15:04 MetalFrog

顯示工具提示，而不是寫多個jQuery函數

回答

相關問題