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文件中无法正常工作？我需要做些什么来处理我的代码？

当我调整窗口大小或单击事件但我的函数在document.ready中不起作用时，

和我的getListHeight（）函数与$(window).resize一起使用。

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 fork的链接：https://codepen.io/Bamieh/pen/gRLPqm

P.S。我建议您不要依赖col-*类作为选择器，因为一旦您更改样式，代码就会轻易中断，使用data-*属性进行选择是我的选择。意见。

等高不起作用.js文件

1 个答案: