爲什麼這個jQuery代碼不工作？

Question

我想做一個簡單的工具提示功能（我試圖學習jQuery，所以請不要爲此提供插件）。當我把它寫這樣它的工作原理：

   $('span.toolTip').hide(); 
      function toolTip() { 
       $('.targetLink').mouseover(function() {     
        $('.toolTip').show().html('Hello there'); 
       }); 
      } 

      <span class='toolTip'></span> 
      <a href="#" class="targetLink">Hover over me</a> 

但是當我嘗試通過函數傳遞參數這是行不通的：

$('span.toolTip').hide(); 
    function toolTip(target, tooltip, message) { 
     var target = '.' + target; 
     $(target).mouseover(function() { 
      var tooltip = '.' + tooltip; 
      $(tooltip).show().html(message); 
     }); 
    } 

    toolTip('targetLink', 'toolTip', 'Hello There'); 

    <span class='toolTip'></span> 
    <a href="#" class="targetLink">Hover over me</a> 

Answer 1

你「隱藏」的target參數與新的本地target變量：

function toolTip(target, tooltip, message) { 
    // this target is not the same as the parameter target 
    var target = '.' + target; 

只要簡單地除去var，它應該工作：

function toolTip(target, tooltip, message) { 
    target = '.' + target; 
    ... 

Answer 2

你沒有得到正確的.class selector自變量爲undefined，它應該是：

function toolTip(target, tooltip, message) { 
    $('.' + target).mouseover(function() { 
     $('.' + tooltip).show().html(message); 
    }); 
} 

目前正在創建一個新變量 ...不是導致正確的SE講師。 You can test the updated/working version here。

Answer 3

您的代碼不工作，因爲變量tooltip未定義。

$(target).mouseover(function() { 
    var tooltip = '.' + tooltip; 
    alert(tooltip); //undefined 
    $(tooltip).show().html(message); 
}); 

請參閱錯誤jsfiddle。

編輯

你變得不確定，因爲@nick說，因爲你使用的關鍵字var在var tooltip創建一個新的局部變量。因此，要修復，請刪除var，您將獲得外部變量（closure）。

請參閱jsfiddle中的正確代碼。

$(target).mouseover(function() { 
    tooltip = '.' + tooltip; 
    $(tooltip).show().html(message); 
});