最近用jquery写点击按钮弹出弹出框,后来发现,要对每类行为的弹出框都要一对一的写一个选择器,后面的方法代码差不多一样,这样产生了好多的重复代码。以后弹出框一多岂不是想class名都要想半天更别说维护了。请问大家有什么好办法没有,这样的情况同样见于弹出框的绝对居中定位,每个框的宽高不同。css代码也不一样,即使用JS操作css也还是会产生一堆类似的重复代码。感觉到有点迷茫,个人感觉是不是要把这样相同功能的函数封装起来,只传不同的参数、变量就行了?求指教。`
请输入代
$(".popup_title a,.bottom_btn").click(function(){
$(this).parents(".popup_bg").fadeOut(200);
});
$(".tc_banzhu").click(function(){
$(".banzhuDon").fadeIn(200);
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"});
});
情况就像上面那样差不多= =
function bindClick(cls1, cls2) {
$(cls1).click(function(){
$(cls2).fadeIn(200);
var popupBox = $(cls2 + " .popup_box");
var tc_hgt = popupBox.height()/2;
var tc_wid = popupBox.width()/2;
popupBox.css({marginLeft:tc_wid*-1+"px",marginTop:tc_hgt*-1+"px"});
});
大概这样吧:
function bindClick(cls1, cls2) {
$(cls1).click(function(){
$(cls2).fadeIn(200);
var popupBox = $(cls2 + " .popup_box");
var tc_hgt = popupBox.height()/2;
var tc_wid = popupBox.width()/2;
popupBox.css({marginLeft:tc_wid*-1+"px",marginTop:tc_hgt*-1+"px"});
});
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。