Question

我正在尝试使用引导程序和jQuery实现动态英雄。英雄是带引号和背景图片的横幅。我遇到的问题是，当引号超过一定长度时，由于子元素的总高度超过容器div的总高度，文本消失了。我已经使用jQuery附加了document.ready和document.resize处理程序，该处理程序计算所有子项的高度并适当调整容器div的大小：

function getHeights() {
    let childVertOffset = $("#client-hero-child").offset().top;
    let childHeightTotal = 0;

    let children = $("[id=client-hero-child]");
    children.each(function () {
        childHeightTotal += ($(this).outerHeight());
    });

    return childHeightTotal + childVertOffset;
}


function fixContainerHeight(newHeight) {
    $("#client-hero").height(newHeight)
}

我将document.ready附加到页面上并调整其大小，如下所示：

$(window).resize(function () {
    if (window.location.pathname.includes('clients/')) {
        fixContainerHeight(getHeights())
    }
});


$(document).ready(function () {
    if (window.location.pathname.includes('clients/')) {
        fixContainerHeight(getHeights())
    }
});

document.resize处理程序可以完美运行，但是我遇到的问题是，在正确加载所有内容之前，document.ready处理程序似乎正在触发。调整大小总是保持一致的数量（计算子项的高度比调整大小处理程序少80px）。更有趣的是，当我复制document.ready语句时，代码可以正常工作（提示该函数触发得太早了），但是如果我将document.ready函数添加到setTimeout函数中，它将无法正常工作，从而表示相反。

如果我执行以下操作并复制处理程序，则该方法有效（也许是在加载内容之前触发函数的问题？）

$(document).ready(function () {
    if (window.location.pathname.includes('clients/')) {
        fixContainerHeight(getHeights())
    }
});


$(document).ready(function () {
    if (window.location.pathname.includes('clients/')) {
        fixContainerHeight(getHeights())
    }
});

但这不起作用：

setTimeout(function(){
    fixContainerHeight(getHeights())
},100);

html（erb）如下：

  <div class="row" id="client-hero-child">
    <div class="col-12 px-sm-0">
      <%= image_tag(@case.logo.url, class: "float-left testimonial-logo") %>
    </div>
    <div class="category-description">
      <p class="left-align client-text"><%= @case.category %></p>
    </div>
    <p class="client-text">"<%= @case.quote.html_safe %>"</p>
    <div class="col-12 pt-3" id ="client-hero-child">
      <span class="float-right client-text"><%= @case.quotee %></span><br/>
      <span class="float-right quote-position" style="margin-bottom: 15px"><%= @case.quotee_position %></span>
    </div>
  </div>

非常感谢您的帮助！

更新：

经过一些故障排除和控制台日志记录后，我发现该问题与CSS功能有关-我有以下CSS：

#client-hero {
  height: 520px;
  background-repeat: no-repeat;
  .banner_detail_height {
    position: relative;
    top: 20%;
  }

“ top”属性引起了麻烦，这似乎是在页面加载后的瞬间。这解释了为什么重复的代码可以解决此问题。第一次运行加载处理程序时，它将计算vert偏移量为110px，然后运行css，添加20％的上边距，然后处理程序运行第二次，并计算200px的垂直偏移量。

有没有办法确保样式在处理程序之前运行？

Answer 1

设法找到问题，这是由于 $（window）.on（'load'）函数在应用CSS'top'属性之前运行。通过将css的“ top”更改为“ padding”，似乎会影响事件的顺序，并且css在onLoad处理程序之前运行。

$ {document）.ready发生故障，$ {document）.resize起作用-相同的处理程序

1 个答案: