在jquery中，如何编写将一个DIV的高度复制到另一个DIV一次的函数？

Question

考虑以下，

<div id="outerDIV">
     <div id="innerDIV" style="height: 100%;">
         <asp:ContentPlaceHolder... />
     </div>
</div>

这些DIV驻留在asp.net站点的母版页中。 我想编写一个函数来复制innerDIV的高度并将其应用到externalDIV的高度。 我可以正常执行此操作，如下所示：

    $(document).ready(function () {
        $('#outerDIV').height($('#innerDIV').height());
    });

但是问题是我只希望它在页面的第一次加载时发生。 当用户导航到其他页面时，我不希望externalDIV再次调整大小。

我该怎么做？

谢谢

Answer 1

从MDN 文档中 ：将类选择器与ID选择器结合使用。

 $(document).ready(function(){
         $('#outerDIV.firstpage').height($('#innerDIV.firstpage').height());
     }
 });

通过添加class='firstpage'选择器，您可以区分首页和其他页面，而不必担心Cookie或跟踪另一个变量。

Answer 2

也许你可以做这样的事情

var applied = 0;/*use it to check if height to outter div has been applied */
$(document).ready(function(){

  if(applied == 0){
  $('#outerDIV').height($('#innerDIV').height());
applied = 1;
}//this way the height will be applied only once

});

Answer 3

你为什么不使用cookies 。

    $(document).ready(function () {
        if(!$.cookie("setHeight"))
        {
           $('#outerDIV').height($('#innerDIV').height());
           $.cookie("setHeight", "1");
        }
    });

并$.removeCookie("setHeight");使用$.removeCookie("setHeight");删除cookie $.removeCookie("setHeight");