從jQuery生成內容

Question

我正在使用jQuery工具提示模塊供個人使用。在我的代碼中，我使用jQuery的mousemove和mouseout函數來生成工具提示。然而，當我將鼠標移動到元素上時，它會觸發構建函數中的if語句，並表示即使我可以在Firebug和Chrome Dev Tools中看到它不存在，工具提示仍然存在。

$.fn.tooltip = function(userOptions) 
{ 
    var defaultOptions = { 
           position: '', 
           follow: true 
          }; 

    var options = $.extend(defaultOptions, userOptions); 

    $(this).mouseenter(function() 
    { 
     var title = $(this).data('title'); 

     build(title, options.position, options.follow); 

     var top, left; 

     var tooltip = $('#tooltip'); 

     if (tooltip.hasClass('top')) 
     { 
      top = $(this).offset().top - ($(this).height() * 2) - 10; 
      left = $(this).offset().left; 
     } 

     else if (tooltip.hasClass('right')) 
     { 
      top = $(this).offset().top - ($(this).height()/2); 
      left = $(this).offset().left + tooltip.width(); 
     } 

     else if (tooltip.hasClass('bottom')) 
     { 
      top = $(this).offset().top + $(this).height() + 10; 
      left = $(this).offset().left; 
     } 

     else if (tooltip.hasClass('left')) 
     { 
      top = $(this).offset().top - ($(this).height()/2); 
      left = $(this).offset().left - (tooltip.width() * 1.5); 
     } 

     tooltip.css('top', top).css('left', left).show(); 

    }); 

    $(this).mousemove(function(e) 
    { 
     if (options.position === "" || options.position === undefined || options.follow === true) 
     { 
      var title = $(this).data('title'); 

      build(title, options.position, options.follow); 

      var top = e.pageY + 25; 
      var left = e.pageX + 10; 

      $('#tooltip').css('top', top).css('left', left).show(); 
     } 
    }); 

    $(this).mouseout(function() 
    { 
     $('#tooltip').hide(); 
    }); 

    function build(title, position, follow) 
    { 
     if ($('#tooltip')) 
     { 
      console.log("The tooltiop should be on the page."); 
      $('#tooltip-content > p').text = title; 
     } 

     else 
     { 
      console.log("Position is: " + position); 

      var markup = '<div id="tooltip" class=' + position + '">'; 
       markup += '<div id="tooltip-content">'; 
       markup += '<p>' + title + '</p>'; 
       markup += '<span id="tooltip-arrow"></span>'; 
       markup += '</div>'; 
       markup += '</div>'; 

      $('body').append(markup); 
     } 
    } 
}; 

原來的目標是創建工具提示首次超過該元素的用戶移動，然後當鼠標移開我想隱藏工具提示，直到再次需要將其移出的方式。這就是爲什麼我要檢查它是否存在於構建函數中。我知道我忽略了一些東西，我只是無法弄清楚它是什麼。有什麼建議麼？

Answer 1

在構建功能改變的檢查中，如果這樣的：

if ($('#tooltip').lenght) { 

，將返回false，如果#tooltip尚未追加到身體和真正的，如果它是。 $（'＃tooltip'）將始終返回一個jQuery對象，因此如果工具提示元素尚未添加到主體中，它將永遠不會是false，但其長度將爲0，因此爲false。

jsFiddle

問候。