1. 首页
  2. 问答
  3. 使代码更健壮（jQuery）

使代码更健壮（jQuery）

2012-04-25 45 views
1

请看看整个代码，如果你复制并粘贴到你的HTML然后应该工作。使代码更健壮（jQuery）

正如你可以在下面的代码中看到的，我必须为每个动作（jquery，css）创建两组代码，我试图实现的是，我只需要有一组代码下面的动作...

我不担心点击事件太多，实际上我想有两个单独的点击事件。 $("#button").click(function(){...}，$("#button1").click(function(){...}

更新时间：

HTML：

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title> 
    <link rel="stylesheet" href="general.css" type="text/css" media="screen" /> 
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <script src="popup.js" type="text/javascript"></script> 
</head> 
<body> 
    <center> 
     <div id="button"> 
      <input type="submit" value="button" /></div> 
     <div id="button1"> 
      <input type="submit" value="button1" /></div> 
    </center> 
    <div id="popupContact"> 
     <a id="popupContactClose">x</a> 
     <h1> 
      Title of our cool popup, yay!</h1> 
     <p id="contactArea"> 
      Here we have a simple but interesting sample of our new stuning and smooth popup. 
     </p> 
    </div> 
    <div id="popupContact1"> 
     <a id="popupContactClose1">x</a> 
     <h1> 
      one more, yay!</h1> 
     <p id="contactArea1"> 
      Here we have a simple but interesting sample of our new stuning and smooth popup. 
     </p> 
    </div> 
    <div id="backgroundPopup"> 
    </div> 
    <div id="backgroundPopup1"> 
    </div> 
</body> 
</html>

的jQuery：

var popupStatus = 0; 
var popupStatus1 = 0; 

//loading popup with jQuery magic! 
function loadPopup(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({"opacity": "0.7" }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#popupContact").fadeIn("slow"); 
     popupStatus = 1; 
    } 
} 

//loading popup with jQuery magic! 
function loadPopup1() { 
    //loads popup only if it is disabled 
    if (popupStatus == 0) { 
     $("#backgroundPopup1").css({ "opacity": "0.7" }); 
     $("#backgroundPopup1").fadeIn("slow"); 
     $("#popupContact1").fadeIn("slow"); 
     popupStatus1 = 1; 
    } 
} 

//disabling popup with jQuery magic! 
function disablePopup(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("slow"); 
     $("#popupContact").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 

//disabling popup with jQuery magic! 
function disablePopup1(){ 
    //disables popup only if it is enabled 
    if(popupStatus1==1){ 
     $("#backgroundPopup1").fadeOut("slow"); 
     $("#popupContact1").fadeOut("slow"); 
     popupStatus1 = 0; 
    } 
} 

//centering popup 
function centerPopup(){ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("#popupContact").height(); 
    var popupWidth = $("#popupContact").width(); 
    //centering 
    $("#popupContact").css({ 
     "position": "absolute", 
     "top": windowHeight/2-popupHeight/2, 
     "left": windowWidth/2-popupWidth/2 
    }); 
    //only need force for IE6 

    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 
} 

//centering popup 
function centerPopup1() { 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("#popupContact1").height(); 
    var popupWidth = $("#popupContact1").width(); 
    //centering 
    $("#popupContact1").css({ 
     "position": "absolute", 
     "top": windowHeight/2 - popupHeight/2, 
     "left": windowWidth/2 - popupWidth/2 
    }); 
    //only need force for IE6 

    $("#backgroundPopup1").css({ 
     "height": windowHeight 
    }); 

} 

//CONTROLLING EVENTS IN jQuery 
$(document).ready(function() 
{ 
    //LOADING POPUP 
    //Click the button event! 
    $("#button").click(function(){ 
     //centering with css 
     centerPopup(); 
     //load popup 
     loadPopup(); 
    }); 

    $("#button1").click(function() { 
     //centering with css 
     centerPopup1(); 
     //load popup 
     loadPopup1(); 
    }); 

    //CLOSING POPUP 
    //Click the x event! 
    $("#popupContactClose").click(function(){ 
     disablePopup(); 
}); 
//Click the x event! 
$("#popupContactClose1").click(function() { 
    disablePopup1(); 
}); 

//Click out event! 
    $("#backgroundPopup").click(function(){ 
     disablePopup(); 
}); 

$("#backgroundPopup1").click(function() { 
    disablePopup1(); 
}); 

    //Press Escape event! 
    $(document).keypress(function(e){ 
     if(e.keyCode==27 && popupStatus==1){ 
      disablePopup(); 
     } 
     if(e.keyCode==27 && popupStatus1==1){ 
      disablePopup1(); 
     } 
    }); 

});

CSS

#backgroundPopup{ 
display:none; 
position:fixed; 
_position:absolute; /* hack for internet explorer 6*/ 
height:100%; 
width:100%; 
top:0; 
left:0; 
background:#000000; 
border:1px solid #cecece; 
z-index:1; 
} 
#backgroundPopup1{ 
display:none; 
position:fixed; 
_position:absolute; /* hack for internet explorer 6*/ 
height:100%; 
width:100%; 
top:0; 
left:0; 
background:#000000; 
border:1px solid #cecece; 
z-index:1; 
} 
#popupContact{ 
display:none; 
position:fixed; 
_position:absolute; /* hack for internet explorer 6*/ 
height:384px; 
width:408px; 
background:#FFFFFF; 
border:2px solid #cecece; 
z-index:2; 
padding:12px; 
font-size:13px; 
} 
#popupContact1{ 
display:none; 
position:fixed; 
_position:absolute; /* hack for internet explorer 6*/ 
height:384px; 
width:408px; 
background:#FFFFFF; 
border:2px solid #cecece; 
z-index:2; 
padding:12px; 
font-size:13px; 
} 
#popupContact h1{ 
text-align:left; 
color:#6FA5FD; 
font-size:22px; 
font-weight:700; 
border-bottom:1px dotted #D3D3D3; 
padding-bottom:2px; 
margin-bottom:20px; 
} 
#popupContact1 h1{ 
text-align:left; 
color:#6FA5FD; 
font-size:22px; 
font-weight:700; 
border-bottom:1px dotted #D3D3D3; 
padding-bottom:2px; 
margin-bottom:20px; 
} 
#popupContactClose{ 
font-size:14px; 
line-height:14px; 
right:6px; 
top:4px; 
position:absolute; 
color:#6fa5fd; 
font-weight:700; 
display:block; 
} 
#popupContactClose1{ 
font-size:14px; 
line-height:14px; 
right:6px; 
top:4px; 
position:absolute; 
color:#6fa5fd; 
font-weight:700; 
display:block; 
} 
#button{ 
text-align:center; 
margin:100px; 
} 
#button1{ 
text-align:center; 
margin:100px; 
}

末更新

我下面这个blog一件事就卡住我的是，我有两个链接，我为了创建了两个独立的环节的工作，我有两次添加相同的代码在jQuery和CSS ...但我认为应该有一个更好的方式做...重复的代码只是名称差异。

我已经为了增加代码的核心所以我Button1的工作，我必须添加两次相同的代码，如下图所示，只需命名差异

<div id="button"><input type="submit" value="Press me please!" /></div> 
    <div id="button1"><input type="submit" value="Press one more time!" /></div> 


    <div id="popupContact"> 
     <a id="popupContactClose">x</a> 
     <h1>Title of our cool popup, yay!</h1> 
     <p id="contactArea"> 
      Here we have a simple but interesting sample 
     </p> 
    </div>

了jQuery的源代码：

$("#backgroundPopup1").css({ 
     "opacity": "0.7" 
    }); 
    $("#backgroundPopup1").fadeIn("slow"); 
    $("#popupContact1").fadeIn("slow");

名为.css

#popupContact { 
display:none; 
position:fixed; 
_position:absolute; /* hack for internet explorer 6*/ 
height:384px; 
width:408px; 
background:#FFFFFF; 
border:2px solid #cecece; 
z-index:2; 
padding:12px; 
font-size:13px; 
}

来源

2012-04-25 Nick Kahn

+0

有东西从你的jQuery失踪......我看不到任何代码的按钮。 – Sparky 2012-04-25 18:55:45

+0

我没有过去的完整代码但你可以看看我的链接 - 博客链接 – 2012-04-25 18:59:37

+0

没有错，但链接你的问题应该是完全独立的。 http://sscce.org – Sparky 2012-04-25 19:06:18

回答

1

从您提供的jQuery代码，唯一我提高换货，我会使用链接

$("#backgroundPopup1").css({ "opacity": "0.7"}).fadeIn("slow"); 
$("#popupContact1").fadeIn("slow");

为了避免对于很多元素结合相同的功能重复的代码提示，你可以这样

$(function(){ 
  
  $("#btnSave,#btnSaveMore").click(function(e){ 
    //do your stuff here 
    }); 

});

绑定它只有一次这将适用于2个元素ID btnSve和btnSaveMore

编辑：根据更新的问题。

所以你已经复制了2个按钮的代码。让我们像这样重写它。

让我们对您的HTML标记进行一些更改。我们会给这些按钮分配ID来识别哪个按钮被点击。

<input id="btn-1" type="submit" value="button" /></div> 
<input id="btn-2" type="submit" value="button1" /></div> 

<div id="popupContact1"></div> 
<div id="popupContact2"></div> 
<div id="backgroundPopup1"></div> 
<div id="backgroundPopup2"></div>

现在让我们去的JavaScript，

$(document).ready(function(){ 

    $("input[type='submit']").click(function(){ 
     var id=$(this).attr("id").split("-")[1]; //this will give us either 1 or 2 
     CenterPopup(id); 
     LoadPopup(id) 
    });  
}); 
var popupStatus = 0; 
function CenterPopup(itemId) 
{ 
    var item=$("#popupContact"+itemId); 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = item.height(); 
    var popupWidth = item.width(); 

    item.css({"position": "absolute", 
     "top": windowHeight/2-popupHeight/2, 
     "left": windowWidth/2-popupWidth/2 
    }); 
    $("#backgroundPopup"+itemId).css({ 
    "height": windowHeight 
    }); 

} 

function LoadPopup(itemId) 
{  
if(popupStatus==0){ 
    var item=$("#backgroundPopup"+itemId) 
    item.css({"opacity": "0.7" }); 
    item.fadeIn("slow"); 
    $("#popupContact"+itemId).fadeIn("slow"); 
    popupStatus = 1; 
    } 
}

工作演示http://jsfiddle.net/3FbbC/7/

这应该布局和你提到的JavaScript代码工作。但我真的不明白为什么你需要2个div的相同目的（popContact1 & poupContact2）。由于我不确定你的整个页面的目标，我无法告诉你一个更好的模式。

来源

2012-04-25 18:54:41 Shyju

+0

我已经更新了我的问题，请看看 – 2012-04-25 22:04:03

+0

@AbuHamzah：我更新了我的答案。 – Shyju 2012-04-25 22:42:29

+0

感谢Shyju，我会给它一个镜头中，'popContact1＆poupContact2'应该只有一个DIV和我在做什么是只显示该分区里面的一些文字。 – 2012-04-25 22:46:45

2

如果你需要从不同元素的单击事件执行类似的功能，你可以定义一个函数，然后再用它：

var myPopupFn = function($this){ 
    //do something to the element that is passed in 
    $this.css({/* etc */}); 
} 

$("#button1").click(function(){ 
    myPopupFn($(this)); 
}); 

$("#button2").click(function(){ 
    myPopupFn($(this)); 
});

来源

2012-04-25 18:57:10 chrismarx

+0

大概''（'＃button1，＃button2'）。click（function（）{...}）;'看起来更好。 – 2012-04-25 18:59:29

+0

或者只是使用一个类。 – 2012-04-25 19:00:00

+0

是啊，真的，试图保持它简单 - – chrismarx 2012-04-25 19:09:19

0

我会做一个像这样的情况是创建一个只需要两个参数（你的ID）的函数。

function whatever(id1, id2) { 
    $("#"+id1).css({ "opacity": "0.7"}).fadeIn("slow"); 
    $("#"+id2).fadeIn("slow"); 
}

然后使用：

whatever("backgroundPopup1", "popupContact1"); 
whatever("backgroundPopup2", "popupContact2");

这使得更多的可重用和提高耐用性。

来源

2012-04-25 18:58:53 styler1972

+0

我已经更新了我的问题，请看看 – 2012-04-25 22:04:26

+0

2:19代码段是不可重用可言，如果你有一个第三个？你真的想复制/粘贴？创建方法来为你做css和淡入淡出，并传入id。此外，你不应该使用这么多的CSS，只需将类应用到你的元素。 – styler1972 2012-04-25 22:38:46

1

如果你拥有了一切，除了名字相同的差异，然后使用类选择，而不是ID选择。

<a class="myLink" id="Link1" >Link1</a> 
<a class="myLink" id="Link2" >Link1</a>

JS：

$(function() { 
    $('.myLink').click (function (e) {    
     $(this).css(/*{...}*/); 
     //... Your code 
     return false; 
    }); 
});

来源

2012-04-25 19:04:17

+0

我已更新我的问题，请看看 – 2012-04-25 22:04:08

相关问题

 相关问题