Question

请看一下整个法典,如果你照抄并抄录在您的html中的话,那么该守则应当有效。

as you can see in the below code i have to create two set of code for every action (jquery,css) and what i am trying to achieve is that, i just need to have one set of code for all the actions below...

i 对点击事件没有太多的担忧,实际上,我想为以下两个单独点击事件:$("#button”).click(功能(){......},$(“#button1”).click(功能){......}。

<>上>

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>

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

});

<><>

#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;
}

结束更新

下面是:,还有一件事情 st了我,我建立了两个联系,以便与工作建立两个单独的联系,即必须增加两倍于 j和 c。

i 增加了该守则的核心内容,以便我的纽特开展工作,也就是说,必须加上下文所示的同一部法典的两倍,只增加姓名。

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

j的源代码是:

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

页: 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;
}

Answer 1

根据你提供的《酒类法》,唯一一种改进建议是使用链条。

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

为了避免反复出现对许多要素具有约束力的同一功能的守则,你只可以这样一次对它具有约束力。

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

});

This will be applied to 2 elements with id btnSve and btnSaveMore

EDIT : As per the updated question.

因此,你重复了2个州的法典。让我们照此做。

让我们改变你的超文本标记。我们将向县提供身份证,以查明哪些县被点击。

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

现在请看 j,

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

Working demo

这应当有助于制定你所提到的布局法和 j法。但我严重不理解为什么你需要2个四分五分之四(波老板1和安插;波动体2)。由于我不相信你整个网页的目标,我无法告诉你一个更好的模式。

Answer 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));
});

Answer 3

如果除姓名差异外,你也一切照样,则使用班级甄选人,而不是身份证选择人。

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

www.un.org/Depts/DGACM/index_french.htm

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

Answer 4

在类似情况下,我会做的是仅仅有两种论点(资料来源)的职能。

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

然后使用:

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

This makes it more re-usable and increases robustness.

友情链接