en passant une variable de mon événement click à une fonction

Question

Existe-t-il un moyen plus efficace de faire cela, je veux dire autre que d'utiliser un global? Je déteste utiliser des variables globales mais je n'arrive pas à comprendre comment passer l'attribut href à la fonction.

$(document).ready(function(){ 
var src 
$('.thumbs li a').click(function(){ 
    src=$(this).attr('href') 
    loadImage(); 
    return false; 
}) 

function loadImage(){ 
var img = new Image(); 
$(img).load(function() { 
     //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already 
     $(this).hide(); 
     $('.large_img_holder').removeClass('loading').append(this); 
     $(this).fadeIn(); 
    }).error(function() { 
     // notify the user that the image could not be loaded 
    }).attr('src', src); 
} 
}); 

Answer 1

Je ne suis pas sûr que ce soit ce que vous êtes après, mais si vous permettez la fonction loadImage de prendre src comme paramètre alors vous pouvez éviter de définir la variable src dans la fonction ready:

$(document).ready(function(){ 
$('.thumbs li a').click(function(){ 
    var src=$(this).attr('href') 
    loadImage(src); 
    return false; 
}) 

function loadImage(src){ 
var img = new Image(); 
$(img).load(function() { 
     //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already 
     $(this).hide(); 
     $('.large_img_holder').removeClass('loading').append(this); 
     $(this).fadeIn(); 
    }).error(function() { 
     // notify the user that the image could not be loaded 
    }).attr('src', src); 
} 
}); 

Answer 2

Vous pouvez simplement passer comme param:

function loadImage(new_src){ 
    var img = new Image(); 
    $(img).load(function() { 
     //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already 
     $(this).hide(); 
     $('.large_img_holder').removeClass('loading').append(this); 
     $(this).fadeIn(); 
    }).error(function() { 
     // notify the user that the image could not be loaded 
    }).attr('src', new_src); 
    }); 
} 

$('.thumbs li a').click(function(){ 
    loadImage($(this).attr('href')); 
    return false; 
}) 

Answer 3

d'abord la variable src est déclarée i nside de $(document).ready(function(){/*...*/}; donc ce n'est pas global. En outre, vous pouvez utiliser les paramètres de loadImage fonctions au lieu de src variable:

$(document).ready(function(){ 
    var loadImage = function(src){ 
     var img = new Image(); 
     $(img).load(function() { 
      //$(this).css('display', 'none'); 
      //.hide() doesn't work in Safari when the element isn't on the DOM already 
      $(this).hide(); 
      $('.large_img_holder').removeClass('loading').append(this); 
      $(this).fadeIn(); 
     }).error(function() { 
     // notify the user that the image could not be loaded 
     }).attr('src', src); 
    }; 

    $('.thumbs li a').click(function(){ 
     loadImage($(this).attr('href')); 
     return false; 
    }); 
});