如何在不同的選擇器中重用jQuery代碼？

Question

我編寫下面的代碼，兩者之間的差異是選擇器，所以如何在少代碼中重用相似的方法？如何使用工廠功能？

$(".tc_banzhu").click(function() { 
    $(".banzhuDon").fadeIn(200); 
    //get the width and height of the dialog 
    var tc_hgt = $(".banzhuDon .popup_box").height()/2; 
    var tc_wid = $(".banzhuDon .popup_box").width()/2; 
    $(".banzhuDon.popup_box").css({ 
    marginLeft: tc_wid * -1 + "px", 
    marginTop: tc_hgt * -1 + "px" 
    }); 
}); 
$(".tc_ban").click(function() { 
    $(".banDon").fadeIn(200); 
    var tc_hgt = $(".banDon .popup_box").height()/2; 
    var tc_wid = $(".banDon .popup_box").width()/2; 
    $(".banDon.popup_box").css({ 
    marginLeft: tc_wid * -1 + "px", 
    marginTop: tc_hgt * -1 + "px" 
    }); 
}); 
$(".tc_banner").click(function() { 
    $(".bannerDon").fadeIn(200); 
    var tc_hgt = $(".bannerDon .popup_box").height()/2; 
    var tc_wid = $(".bannerDon .popup_box").width()/2; 
    $(".bannerDon.popup_box").css({ 
    marginLeft: tc_wid * -1 + "px", 
    marginTop: tc_hgt * -1 + "px" 
    }); 
}); 

Answer 1

使用函數表達式點擊回調函數：

var action = function(e) { 
    $(e).fadeIn(200); 
    var tc_hgt = $(e).find(".popup_box").height()/2; 
    var tc_wid = $(e).find(".popup_box").width()/2; 
    if ($(e).hasClass(".popup_box")) $(e).css({marginLeft: tc_wid * -1 + "px", marginTop: tc_hgt * -1 + "px"}); 
};  

$(".tc_banzhu, .tc_ban, .tc_banner").click(function() { 
    action(this); 
});