Pourquoi ce code jQuery ne fonctionne-t-il pas?

Question

J'essaie de faire une simple fonction de pointe d'outil (j'essaie d'apprendre jQuery alors s'il vous plaît ne suggère pas de plugins pour cela). Quand je l'écris comme cela, il fonctionne:

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

Mais lorsque je tente de passer des paramètres par la fonction ne fonctionne pas:

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

Vous "cacher" le paramètre target avec une nouvelle variable target locale:

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

Retirez simplement les var et il devrait fonctionner:

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

Answer 2

Vous n'êtes pas obtenir le droit .class selector puisque la variable est undefined, il devrait être:

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

Actuellement, vous créez une nouvelle variable ... résultant pas dans la bonne soi lecteur. You can test the updated/working version here.

Answer 3

Votre code ne fonctionne pas car la variable tooltip est indéfini.

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

Voir l'erreur dans jsfiddle.

EDIT

Vous obtenez non défini, comme dit @ Nick, parce que vous créez une nouvelle variable locale en utilisant le mot-clé dans varvar tooltip. Donc, pour corriger, retirez var et vous obtiendrez la variable externe (closure).

Voir le code correct dans jsfiddle.

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