從我的點擊事件傳遞一個變量到函數

Question

有沒有更高效的方式來做到這一點，我的意思是除了使用全局？我討厭使用全局變量，但我似乎無法弄清楚如何將href屬性傳遞給函數。

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

我不知道這是否是你追求的，但如果你讓loadImage功能採取src作爲參數，那麼你就可以避免在ready功能定義src變量：

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

你可以簡單地把它作爲一個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

所有src變量首先聲明我$(document).ready(function(){/*...*/};因此它不是全球性的。此外，您可以使用loadImage函數的參數，而不是src變量：

$(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; 
    }); 
});