jQuery高度自动调整有问题

Question

我在SharePoint中有一个包含本地和全局内容的页面。对于本地内容，我们使用自定义编辑器Web部件（Telerik）。对于全局内容，我让jQuery从全局存储库中的外部文件中编写内容。

现在，本地和全局内容通过无序列表呈现。为了使本地和全局内容看起来无缝，我让jQuery自动调整本地和全局容器的位置：

在此页面中，内容所有者应该能够随意编辑本地内容，并且可以通过Telerik Web部件进行编辑：

但是，一旦保存更改，元素就会变得混乱：

我需要点击刷新才能将元素放到位。有时，甚至不需要编辑页面来获取该错误。有时候，第一次去页面也会混淆元素的位置。和之前一样，您需要刷新页面。而且它不一致。有时候，你只需刷新一次。其他时候，需要一些刷新。

以下是我对该页面的代码：

<script lang="en" type="text/jscript">

  function changePos(src,tgt) {
      var pos = $(src).height() + 20 + "px";
      $(tgt).css({top: pos});
  }

  function changeIndex (src){
      switch(src)
        {
          case "buy":
            $("#buy").css("z-index","3");
            $("#comp").css("z-index","2");
            $("#travel").css("z-index","1");
            //alert("Buy");
            break;
          case "comp":
            $("#comp").css("z-index","3");
            $("#buy").css("z-index","2");
            $("#travel").css("z-index","1");
            //alert("Comp");
            break;
          case "travel":
            $("#travel").css("z-index","3");
            $("#comp").css("z-index","2");
            $("#buy").css("z-index","1");
            //alert("Travel");
            break;
          case "comm":
            $("#comm").css("z-index","3");
            $("#fclts").css("z-index","2");
            $("#dept").css("z-index","1");
            //alert("Comm");
            break;
          case "fclts":
            $("#fclts").css("z-index","3");
            $("#comm").css("z-index","2");
            $("#dept").css("z-index","1");
            //alert("Facilities");
            break;
          case "dept":
            $("#dept").css("z-index","3");
            $("#fclts").css("z-index","2");
            $("#comm").css("z-index","1");
            //alert("Dept");
            break;
          case "career":
            $("#career").css("z-index","3");
            $("#pay").css("z-index","2");
            $("#time").css("z-index","1");
            //alert("Career");
            break;
          case "pay":
            $("#pay").css("z-index","3");
            $("#career").css("z-index","2");
            $("#time").css("z-index","1");
            //alert("Pay");
            break;
          case "time":
            $("#time").css("z-index","3");
            $("#pay").css("z-index","2");
            $("#career").css("z-index","1");
            //alert("Time");
            break;
        }
      }     

  $(document).ready(function(){
      var path = window.location.pathname;
      var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1];    

      switch(filename){
          case "EmployeeResourcesAUS":
            $("#locDir").text("Austin Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;
          case "EmployeeResourcesCLG":
            $("#locDir").text("Calgary Phone Directory");
            $("#locDir").attr("href","https://webkc.kenonic.com/directory/Phonelist/PhoneList.pdf");
            break;
          case "EmployeeResourcesMDW":
            $("#locDir").text("Midwest Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesLLLP":
            $("#locDir").text("Austin LLLP Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesWSC":
            $("#locDir").text("West Coast Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesGCEC":
            $("#locDir").text("Gulf Coast EC Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesKNX":
            $("#locDir").text("Knoxville Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;      
          case "EmployeeResourcesBDN":
            $("#locDir").text("Bradenton Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;      
          case "EmployeeResourcesSG":
            $("#locDir").text("Singapore Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesCR":
            $("#locDir").text("Costa Rica Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;  
          case "EmployeeResourcesPH":
            $("#locDir").text("Philippines Phone Directory");
            $("#locDir").attr("href","http://pss.emersonprocess.com/directory/");
            break;                                                                  
        }

      changePos("#buy","#comm");
      changePos("#comp","#fclts");
      changePos("#travel","#dept");

      var intA = $("#buy").height() + $("#comm").height();
      var intB = $("#comp").height() + $("#fclts").height();
      var intC = $("#travel").height() + $("#dept").height();

      if (intA > intB && intA > intC){
          var intH = intA + 40;
          var pxlH = intH + "px";

          $("#colBuy").css({height: pxlH});
      }
      else if (intB > intA && intB > intC){
          var intH = intB + 40;
          var pxlH = intH + "px";

          $("#colBuy").css({height: pxlH});        
      }
      else{
          var intH = intC + 40;
          var pxlH = intH + "px";

          $("#colBuy").css({height: pxlH});
      }      

      var intD =  $("#career_content").height(); 
      var intE =  $("#pay_content").height();
      var intF =  $("#time_content").height();
      var pxlD

      if (intD > intE && intD > intF) {
          pxlD = intH + intD + 300 + "px";
      }
      else if (intE > intD && intE > intF) {
          pxlD = intH + intE + 300 + "px";
      }
      else {
          pxlD = intH + intF + 300 + "px";
      }

      $("#emp_rsrcs").css({height: pxlD});

      //contentDisp("/systems_hr/onboarding/Custom%20Pages/Employee%20Resources%20EN/gblEMPv2-1.html","#gblContent1");
      //$("#gblContent1").load("/systems_hr/onboarding/Custom%20Pages/Employee%20Resources%20EN/gblEMPv2-1.html");
    }

    );

</script>

代码的哪一部分正在制造这种疾病？而且，如果你碰巧知道一个比我正在做的更好，更好的替代方案，我会全力以赴。我是jQuery的新手，BTW，所以请耐心等待:(

更新

我似乎找到了这个bug。发生的事情是我的全局内容div的高度有时被忽略，可能是因为在全局内容成功加载之前触发了changePos函数。例如，在购买和购买发货部分，本地内容（＃locContent1）的高度为109px，全局内容（#gblContent1）为189px。这意味着整个div（#buy）的总高度应为298px。通常，changePos函数只能识别本地内容高度，因此changePos只能达到129px，导致我的目标div（#comm）与其位置重叠（如图3所示）。因此，这意味着在全局内容加载之前触发该函数。

如果我的全局内容成功加载后，如何告诉jQuery使用changePos函数？

更新2

即使在内容加载之后，jQuery也会将我的全局内容DIV读取为高度为0。如何确定新高度？或者我应该指定一个固定的高度？

Answer 1

有没有与此相关的CSS？我认为您缺少位置属性，而且对于本地内容Web部分，您是否设置了高度属性？如果没有，你也可以尝试设置高度属性