使用jQuery设置高度，不需要刷新

Setting height with jQuery without refresh

本文关键字：不需要 刷新 高度 jQuery 设置 使用      更新时间：2023-09-26

我已经创建了两个div在彼此的顶部。第一个div包含WordPress生成的img，第二个div在悬停图像div时从顶部滑动。在正常的css中，两个div都有固定的高度，但是当我添加媒体查询时，我需要将图像div的高度更改为auto以保持正确的尺寸。

HTML代码:

<div class="portfolio-page-thumbnail">
  <?php the_post_thumbnail(); ?>
  <div class="portfolio-page-hover">
        <p>BEKIJK PROJECT</p>
  </div>
</div>
CSS: 

     .portfolio-page-thumbnail{
        width: 100%;
        height: auto;
     }
     .portfolio-page-hover{
       width: 100%;
       position: absolute;
       top: -50%;
     }

这是问题:当减少我的浏览器宽度，图像缩放正常，但悬停div保持在一个固定的高度，因为悬停div有一个绝对的定位，它不能从它的父高度继承。

我创建了一个jQuery代码片段来获取图像div的高度，并将这个高度设置为hoverdiv。

$(document).ready(function(){
 $(".portfolio-page-hover").height( $(".portfolio-page-thumbnail").height()    );
});

这在刷新时很好，但一旦我减少我的浏览器宽度，这不再适用，我必须再次刷新。通常情况下，这是很好的，但当我的客户从纵向改为横向时，它似乎坏了。我想知道是否有解决方案来设置高度"实时"没有刷新?

非常感谢!

您可以将其放置在resize事件处理程序中:

$( window ).resize(function() {
    $(".portfolio-page-hover").height( $(".portfolio-page-thumbnail").height());
});

当窗口大小被调整时，这个函数会被调用。

我想我应该把我的评论变成一个答案。和斯宾塞的答案一样但是它调用了一个函数所以你不需要写很多次。

$(document).ready(function(){
 myFunc();
});
$(window).resize(function(){
 myFunc();
});
function myFunc() {
 $(".portfolio-page-hover").height( $(".portfolio-page-thumbnail").height());
}

关于jQuery的resize事件处理程序的更多信息在这里

好的，首先，感谢你们所有人的帮助。结合以上答案，我找到了一个解决办法。

结果:

 // Sets the right height to the Hover element
 function myFunc() {
    $(".portfolio-page-hover").height( $(".portfolio-page-thumbnail").height());
 }
  //Sets the correct height on refresh
  myFunc(); 
  // sets height when resizing the window
  $( window ).resize(function() {
    myFunc();
  });

注意:这段代码将被放置在另一段已经有文档的代码中。准备功能。

写对了吗?或者代码能更简洁吗?

相关文章：