javascript - 等高不工作.js 文件

Question

我有一个基本如下编写的函数:

  function getListHeight() {

    $(".tur-list .col-lg-5 figure img").each(function() {
        var getTurHeight = $(this).parents(".tur-list").find(".col-lg-7").outerHeight();
        var getLeftHeight = $(this).parents("tur-list").find(".col-lg-5 figure img").outerHeight();
        if (getTurHeight > getLeftHeight) {
            $(this).outerHeight(getTurHeight);
        }
    });
}

使我的专栏相等，它按我想要的方式工作，所以这里没有任何内容。我的问题是此代码不适用于我的 .js 文件，但如果我复制并粘贴它到控制台，我的代码可以正常工作，所以如果您尝试，您会看到

Please click to my real demo

并复制 getListHeight(); 并将其粘贴到控制台上 您会看到我的列将相等 我的问题是为什么我的代码在 .js 文件中无法正常工作？我需要做什么才能运行我的代码？

我的 getListHeight() 函数在调整窗口大小时或单击事件时与 $(window).resize 一起工作，但我的函数在 document.ready 中不起作用。

Answer 1

它不工作，因为图像尚未加载，图像标签在那里，但尚未设置大小，因为图像仍在加载。

我将代码更改为以下内容:

function matchSize() {
  var getTurHeight = $(this).parents(".tur-list").find(".col-lg-7").outerHeight();
  var getLeftHeight = $(this).parents("tur-list").find(".col-lg-5 figure img").outerHeight();
  if (getTurHeight > getLeftHeight) {
    $(this).outerHeight(getTurHeight);
  }
}
function onResize() {
  $(".tur-list .col-lg-5 figure img").each(matchSize);
}
function getListHeight() {
  $(".tur-list .col-lg-5 figure img").load(matchSize);
}

$(document).ready(function(){
  getListHeight();
  $(document).on('resize', onResize)
  onResize()
});

这将适用于调整大小、新加载的图像以及在 javascript 启动之前加载的图像(可能是缓存图像)。

这是 codepen 分支的链接:https://codepen.io/Bamieh/pen/gRLPqm

附言我确实建议您不要依赖 col-* 类作为选择器，因为一旦您使用 data-* 更改样式，代码很容易中断在我看来，选择属性是可行的方法。