Question

我有两个div并排。左（方法）div包含链接，当单击时，使用'.load'将一些文本从外部html文件加载到右（描述）div中。我还有一些脚本将'methods'div的高度与'description'div相匹配，我将它放入一个函数中。

我的问题是我无法让高度匹配功能在与文本加载脚本相同的点击上运行。目前，单击链接可以按需要加载文本，但在再次单击链接之前不会发生高度匹配。

我是javascript / jQuery的新手，所以对任何和所有分辨率都开放，包括代码的全部重写，如果这就是它。

此处可以看到代码“正常运行”：http://plnkr.co/edit/1CW1a7XNu73Kyo4xPMyg?p=preview

$(document).ready(function() {
    
    function matchDesc() {
        var hh = document.getElementById("descriptions").offsetHeight;         
        document.getElementById("methods").style.height = hh + "px";
    }

     $("#content").on('click', '#link', function(){
        var str = $(this).attr('class');
        var sect = str.slice(-1);
        $("#descriptions").load("descriptions.html #description-" + sect);
        $("#methods li a").css('color','#3164BE');
        $(this).css('color','red');

        matchDesc();
    });                     
                      
    window.onload = function() {
    matchDesc();
        }
});

Answer 1

此处修复了代码：http://plnkr.co/edit/lcAmQ9wcIGLJ9JjDi3HD?p=preview

$(document).ready(function() {

  function matchDesc() {
    var hh = document.getElementById("descriptions").offsetHeight;
    document.getElementById("methods").style.height = hh + "px";
  }

  $("#content").on('click', '.link', function() {
    var str = $(this).attr('id');
    var sect = str.slice(-1);
    $("#descriptions").load("descriptions.html #description-" + sect,
      function() {
        $("#methods li a").css('color', '#3164BE');
        $(this).css('color', 'red');
        matchDesc();
      });

  });

  window.onload = function() {
    matchDesc();
  }
});

正如arun所说，你需要在load事件完成后调用matchDesc

Answer 2

请参阅此分支：http://plnkr.co/edit/x4Ge7Xy3DRuQWlM9McxD?p=preview

遵循Arun的建议并更改了matchDesc（）; 使用window.onload时，请不要使用matchDesc();，以便在阅读后立即调用函数。使用window.onload = matchDesc将允许在其他所有内容加载后加载。

$(document).ready(function() {

    function matchDesc() {
        var hh = $('#descriptions').outerHeight()        
        return $('#methods').outerHeight(hh);
    }

     $("#content").on('click', '.link', function(){
        var str = $(this).attr('id');
        var sect = str.slice(-1);

        $("#descriptions").load("descriptions.html #description-" + sect, function() { 
            $("#methods li a").css('color','#3164BE');
            $(this).css('color','red');
            matchDesc();
        });
    });                     

    window.onload = matchDesc;

});

使用jQuery调用多个函数。（'click'...）

2 个答案: